The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Current page in main navi drop down background color (2 posts)

  1. reganinc
    Posted 2 years ago #

    I'm building the company's new site and I'm still kind of a newbie. The site is nowhere near completion and I've done a lot of "let me throw this in so I can show my boss what it will look like" so please don't judge the site!

    I'm using the theme Silver Blue and I love that the background color of the current page menu item is a different color than the rest of the menu items. However, when it comes to the drop-down items the font will change to white but the background stays a light grey.


    If you click hover over "about us" and then click on "meet the team," after the page loads hover over "about us" again and you will see what I'm talking about.

    I'm guessing it has something to do with this section, but I don't know what to add or change to either change the background color or the font color of the child menu item:

    .main-navigation .current-menu-item, .main-navigation .current-menu-item:hover,
    	.main-navigation .current-menu-ancestor, .main-navigation .current-menu-ancestor:hover,
    	.main-navigation .current_page_item, .main-navigation .current_page_item:hover,
    	.main-navigation .current_page_ancestor, .main-navigation .current_page_ancestor:hover {
    		background: linear-gradient(rgb(14, 54, 120), rgb(1, 44, 113)) repeat scroll 0% 0% transparent;
    		background: -webkit-linear-gradient(top, rgb(14, 54, 120), rgb(1, 44, 113)) repeat scroll 0% 0% transparent;
    	.main-navigation .current-menu-item > a, .main-navigation .current-menu-item > a:hover,
    	.main-navigation .current-menu-ancestor > a, .main-navigation .current-menu-ancestor > a:hover,
    	.main-navigation .current_page_item > a, .main-navigation .current_page_item > a:hover,
    	.main-navigation .current_page_ancestor > a, .main-navigation .current_page_ancestor > a:hover {
    		color: #ffffff;
    		font-weight: bold;
  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Topic Closed

This topic has been closed to new replies.

About this Topic