Highlight active menu item
-
Hi,
I have styled my CSS in a way, that when a menu item from the nav bar is selected, its font is showing in a different color (blue: #5675b9).
However, when I click on a subpage from a main menu item, the menu item under which it is linked does not show in blue.
Here’s a example:
When I click on https://www.cancerwithhope.com/resources, the menu item’s text “Resources” is showing up in blue, whereas the other menu items remain white.
However, when I click on a subpage link of ‘Resources’, e.g. https://www.cancerwithhope.com/resources/cancer-centers, the menu item’s text “Resources” is still showing in white, even though I would like it to show in blue.
How can I change this?
This is my current CSS:/*NAVIGATION BAR*/ /*Navigation bar background full width*/ .main-navigation { background-color: #97bc3f; } /*Navigation bar font size*/ #site-navigation a { font-size: 24px; } /*Unordered list styles to body don't affect navigation bar style*/ #site-navigation ul li{ padding: 0px; } /*Search bar*/ .main-navigation .navigation-search input[type="search"], .main-navigation .navigation-search input[type="search"]:active { color: #FFFFFF; background-color: #5675b9; } /*Font color of unselected menu items*/ .main-navigation .main-nav ul li a, .main-navigation .menu-toggle { color: #fff; } /*Menu items hover*/ .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a { color: #5675b9; background-color: #97bc3f; } /*Chosen menu item*/ .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: #5675b9; background-color: #97bc3f; } /*Chosen menu item hover*/ .main-navigation .main-nav ul li:hover[class*="current-menu-"] > a { color: #5675b9; background-color: #97bc3f; }
I guess I made a mistake somewhere in there, but just can’t figure it out.
Thanks for your help,
MichaelaThe page I need help with: [log in to see the link]
- The topic ‘Highlight active menu item’ is closed to new replies.