-
Hi team,
I’ve created a mega menu for the Courses drop down but it’s not taking on the styles I’ve set in the overlay panel, it’s instead inheriting from the main menu (font styles) and has a transparent background even though I’ve set it as white.
I’m confused as to how this works, shouldn’t the set styles come first otherwise what’s the point of having options to choose from? This also happens with the buttons which take on the link colour from the customizer no matter what you’ve put in the styles. Customizer takes precedence in CSS?
Thank you!
-
Hi there,
Select the Site Header block, set its position to relative, and z-index to 99.
Regarding the link color issue, make sure the link color is defined under Customize > Colors > Body > Link instead of Customize > Colors > Content > Link. The Content > Link rule has higher specificity and will override block-level link color declarations.
Let me know if it works!
-
Hi Alvind,
That fixed the background of the mega menu but how do I make sure the typography styling I’ve set in the overlay panel is used and not the styling of the main menu nav?
Thank you!
-
Could you clarify which specific styling should be different? It would also be helpful if you could share a screenshot showing how the mega menu is intended to look.
-
Hi Alvind,
I’ve put a link to the screenshot, from the mega menu backend. I don’t want the menu items to be uppercase or have letter spacing, they are inheriting that from the main nav menu.
Thank you!
-
Ah, okay. You can do this:
Select the Grid block inside the mega menu element, then under Typography settings, set Text Transform to None and Letter Spacing to 0px.
-
Thank you Alvind, saved me as usual 🙂
-
You’re welcome! 🙂
- You must be logged in to reply to this topic.