[Resolved] Dropdown menu color for different elements

[John]

Hi there,

If I have different page headers for different types of page (Home, Pages, Blog Posts), how can I control the drop down menu colors?
In each of the elements I select “Navigation Colors” but that only allows me to modify the main nav colors for each one…not the submenus.
Is there something I am missing or do I need to target each page/type of page with individual css?
Cheers!

[Tom]

Hi there,

It’s not possible to change the dropdown menu colors at this time. Typically, the dropdown menu color is expected to be consistent across the site. The top-level should change to contrast with the hero background.

Of course, you can use CSS to change the background colors.

For example:

.page-id-123 .main-navigation ul ul {
    background-color: #000; /* background color */
}

.page-id-123 .main-navigation .main-nav ul ul li a {
    color: #fff; /* text color */
}

You just need to change the 123 to the ID of the page you’re targeting.

Let me know if you need more info 🙂

[John]

OK thanks – yeah I can do that with targeting the pages.
Thought I was missing something.
Will try to make it universal and get back to you if need more help.
Thanks!

[Tom]

No problem! 🙂

[Author]

Posts