Archived topic
Dropdown menu color for different elements
3 replies · Started by John on February 9, 2020
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!
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 :)
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!
No problem! :)
