• 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,
    Michaela

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Highlight active menu item’ is closed to new replies.