WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. reganinc
    Member
    Posted 10 months 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.

    http://www.reganinsurance.com/class

    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 10 months 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.

Reply

You must log in to post.

About this Topic