Hi,
I’m using Vantage theme premium. I have 4 items on my menu; Home, About Us, Services and Contact Us.
Under ‘About Us’, I have 4 drop-down menu sub-items; Our Vision, Our Mission, Our Team, Our Strength.
The current page background color was set to orange. It works perfectly. However, If I click on a sub-item like ‘Our Vision’. The main menu item ‘About Us’ remains black/grey. I would rather have the background color of the sub-item (Our Vision) and the main menu item (About Us) to be orange at the same time.
Please how do I do this?
Again, too quick to ask a question without searching the forum for similar older threads.
I have found the solution. Thanks.
As an update to my question above.
I found the code below from an older post which worked.
.main-navigation ul li.current_page_parent > a, .main-navigation ul li.current_page_item > a { background-color: #f24202 }
.main-navigation ul li.current_page_parent > a, .main-navigation ul li.current_menu_item > a [class^=”icon-“],
.main-navigation ul li.current_page_parent > a, .main-navigation ul li.current_page_item > a [class^=”icon-“] { color: #ffffff }
However, I have my hover background color as blue. I don’t want an active menu item background color (orange) to change colour when I hover around it. This works for everything other thing except ‘About Us’ and its drop-down menu sub-items.
For example, when ‘Our Mission’ is active, I would like ‘About Us’ to remain in orange background color (not blue) even if I hover on it.
Please how can I do this? I couldn’t find help anywhere on the site.
Hi Okeyossai
Please add the following to your custom CSS
.main-navigation ul li.current_page_parent > a:hover, .main-navigation ul li.current_page_item > a:hover { background-color: #f24202; }Let us know how you get on
Magus
Thanks Magus.
It worked. However, there is still one final problem left with the menu coor customization.
For example, if ‘Our Mission’ is active, the colour orange as well as ‘About PetroSai’, even if I hover around it from outside. However, If I start moving up and down the other non-active sub-items (like ‘Our Vision’, ‘Our Strength’ and ‘Our Team’), then suddenly ‘About PetroSai’ changes to blue. How do I make stay orange as long as it is active or any of the sub-items? Thanks
Hi Okeyossai
Please change this line in your original CSS
.main-navigation ul li.current_page_parent > a, .main-navigation ul li.current_page_item > a { background-color: #f24202; }to this
.main-navigation ul li.current_page_parent > a, .main-navigation ul li.current_page_item > a { background-color: #f24202 !important; }Please note the use of the !important attribute. This overrides the change being set in the customizer options.
Let us know how you get on
Magus
Many thanks Magus. It worked.