- This topic has 15 replies, 5 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
Hi GeneratePress team,
The client wants to have a different colour dropdown to match their branding for certain section.
I’ve sorted this by going through your help forums.
However, I’ve noticed when you’re on the main level menu item of the associated dropdown it appears the same colour as the background so consequently aren’t visible. I’m having trouble targeting the dropdown menu items when the main level menu item is active.
Hope that makes sense.
You can see what I mean from the link I’ve attached in private info.
By the way, everything seems to work with the dropdowns when you aren’t on the main level of that dropdown.
Thanks
Gary
Customer Support
Hi there,
Not 100% sure if I understand the requirement here.
All the CSS associated with the navigation colors are here though:
https://docs.generatepress.com/article/changing-navigation-colors/Can you take a look and see if you can spot what you need?
Hi,
Sorry, I knew I’d made this more complicated than it needed to be. I’d just wanted to prefix my question with the fact I’d used custom classes to change the colour of the sub menus and main level menu items.
Basically, all of the menu items and sub menus have unique colours. If you hover over any of the menu items that have a sub menu, like ‘Services’ for example, you’ll notice the main level menu item text (Services) changes to purple and its sub menu has that same purple as a background colour with white text – this is what I wanted to happen.
The problem:
However, if you then click on any of those main level menu items like ‘Services’, the sub menu text changes from the original white to be the same colour as the background so you can’t see them. They’re basically using the style of the main level menu item.How do I make the sub menu text stay white?
Cheers
Customer Support
Hi there,
The problem:
However, if you then click on any of those main level menu items like ‘Services’, the sub menu text changes from the original white to be the same colour as the background so you can’t see them. They’re basically using the style of the main level menu item.ah yeah that’s right. The submenu items inherits this CSS you have on the site’s child theme:
.main-navigation .main-nav ul li.thinking-color a:hover, .main-navigation .main-nav ul li.thinking-color.current-menu-item a { color: #BE3A34; }We can override this for the submenu.
Example:
.main-navigation .main-nav ul li.thinking-color.current-menu-item ul.sub-menu li a { color: white; }Cheers. That’s sorted that issue. However, now I’m getting the same problem on the 2nd level sub menu.
So hover over Services, then Benchmarking and you’ll see menu items in the 2nd sub menu are inheriting the link colour from Benchmarking.
I’ve tried a few things to target it, but no joy.
Any ideas please?
Cheers.
Customer Support
Hi Gary,
Give these classes a try:
Normal state:
.main-navigation .main-nav > ul > li >ul >li:hover >ul > li.services-dropdown2 >aHover state:
.main-navigation .main-nav > ul > li >ul >li:hover >ul > li.services-dropdown2:hover >aCurrent menu item state:
.main-navigation .main-nav > ul > li >ul >li:hover >ul > li.services-dropdown2.current-menu-item >aPerfect, thanks.
No problem 🙂
Sorry, one more thing I’ve noticed.
When you hover over the main menu items or when you select one of the main menu items they change to their respective colours, which is what we wanted. For example, About Us is blue on hover and when the About Us page is active.
However, when you select one of the dropdown menu items within About Us for example, About Us becomes light grey. Is there a way to target the state of the parent menu item when one of the child menu items is active/selected?
So for example, when you select Meet the Team which is a child menu item of About Us, we’d still like About Us menu item to remain blue.
Many thanks,
Gary
Customer Support
Hi there,
WP adds the
current-page-ancestorclass to any parent menu items when a child item is selected.
So you can include that as an additional selector eg..main-navigation .main-nav ul li.about-color a:hover, .main-navigation .main-nav ul li.about-color.current-menu-item a, .main-navigation .main-nav ul li.about-color.current-page-ancestor > a { color: #0085AD; }Or you can try wildcarding it eg.
.main-navigation .main-nav ul li.about-color a:hover, .main-navigation .main-nav ul li.about-color[class^="current-"] > a { color: #0085AD; }This:
[class^="current-"]effectively looks for any class starting withcurrent-Amazing. Thanks David.
You’re welcome!
Sorry I’ve just spotted something else after the new CSS changes I made.
The main menu items act perfectly (using their hover colour when a child item is selected) since using the current-page-ancestor class. However, it seems to be filtering dowm to the child items as well. When I select one of the child menu items, all the children items in that sub menu adopt the same colour as the main parent menu item.
We just need the sub menus to have the grey background and white text, and use a black text hover state.
This was working before we added that last bit of CSS.
Any ideas?
Many thanks.
I made a tweak to the code above :
https://generatepress.com/forums/topic/targeting-the-css-for-the-dropdown-menu-items/#post-1915207
ie. adding the
>child selectorAh thanks David.
- You must be logged in to reply to this topic.
