Current Menu Item text color

  • Resolved brittanyannebrown

    (@brittanyannebrown)


    11 years, 10 months ago

    Hi there. I am trying to change the color of the text on a menu item when it is on that page. The text of my menu items are black but when it is on that specific page I want it to be white text. I tried this in my CSS:

    .current-menu-item a {
    color: #FFFFFF;
    }

    But it does not change it. Any suggestions??

Viewing 4 replies - 1 through 4 (of 4 total)

  • It’s because that parent theme is using a more specific selector, so yours couldn’t overide it. Just put more weight on your selector to win it out.

    #navigation .current-menu-item a,
#navigation .current_page_item a {
	color: white;
}

    The page one, I suppose it is for when it’s a page, so just put it there.

    Thread Starter brittanyannebrown

    (@brittanyannebrown)

    PERFECT! Thanks so much!!! I felt like I tried everything and that worked! Since I am working with a child theme I had to add “!important” after the color for it to show up and override the parent. This is how I put it in the CSS:

    #navigation .current-menu-item a,
    #navigation .current_page_item a {
    color: #FFFFFF !important;
    }

    hmm, I think that should do it without the !important bit.

    I tested it at this page ( so current item is “about” )
    https://themes.wptheming.com/portfolio/about/

    and in Firebug, I put those 2 lines in at the bottommost of the main style.css which is the same thing as below the @import line of childtheme’s style, and it works, it changes color of “about”.

    So how do you get it to work without changing the color of the sub-menu when only the parent page is current?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Current Menu Item text color’ is closed to new replies.