[Resolved] Elements Submenu Feature Request

[Sven]

Hi Guys,

quick question: Would it be possible to allow us to edit the sub menu colors when working with merged headers?

Best,
Sven

[Tom]

Hi Sven,

I’ve thought about this, but it would add quite a few more controls to the options area. It hasn’t come up often enough for me to go ahead and do it.

Let us know if you’d like some help with the CSS for now 🙂

Thanks for the feedback!

[Sven]

Copy that and thanks but we’ve got the CSS down already.

I understand the concern for clutter but I think it could simply have a checkbox asking to “inherit customizer color options”? Maybe that doesn’t make a lot of sense technically but the current process is interruping our flow every time, making us use the Elements less and less in favour of other options. Perhaps that’s why you never hear any new requests for it^^

[Tom]

So would you want the sub-menu to inherit the top-level colors you’ve set in the Element?

[Sven]

Ah, I misunderstood my developer here. He would indeed prefer an entirely different color setting for the submenu as many elements work with background images and proper visibility often requires slight adjustment. Having to jump into code for every single element seems quite limiting.

Sorry for the confusion, I wrote this before coffee – capital mistake 😀

[Tom]

No worries – so all-new options for the sub-menu inside each Element. I’ll definitely play with it 🙂

[Sven]

We trust you’ll make the best decision for GP!

[Markus]

Hi Tom.

Same issue here.

I use the Element – Header – SiteHeader – NavigationColors to style two different types of headers: one with white text (for dark hero images) and one with dark text (for light hero images).

For me it would be fine if the sub-menu inherits the top-level colors of the Element.

Unfortunately the ElementClasses for the Page Hero section will show up later in the page source.
So I can’t use them to style the sub menu.

Any idea for a workaround?

Markus asking

[Tom]

The trouble I’ve found with this is that people usually make their navigation transparent when dealing with heroes. This means the sub-menu would also be transparent, which rarely looks good.

That being said, it shouldn’t be difficult to target your sub-menu with CSS – you just need to add a custom class to your hero, and then make sure your CSS is more specific than the core CSS. That way the order of the CSS doesn’t matter.

Let me know if you need more info 🙂

[Markus]

Tom,

yes, please.

This

.my-custom-hero-class .main-navigation .main-nav ul ul li a {
	color: #030303;
}

does not work.

And yes, the sub-menu background is transparent, but looks good, I promise.

[Tom]

Any chance you can link me to the page where the CSS should work?

[Markus]

Tom,

sure. Because it is a testing environment, I do not paste the link.
You find a page at test.web4.kundenserver42.de.
Just add a https protocol and check the page /was-ist-cbd.

PS
Well done! The new elements feature of GP is a very powerful concept. Love it.

[Tom]

I’m getting a 404 error with that URL – can you double-check?

[Markus]

Sorry.
One Word missing.
It’s test.web4.homer.kundenserver42.de.

[Tom]

Ah, we need to target the body class, unfortunately.

So you’d do this:

.page-id-106 .main-navigation ul ul {
    background: #000;
}

[Author]

Posts