Need help? Check out our Support site, then


change text color of navigation menu buttons

  1. timesnewpaulie
    Member

    how do I change the color of the text of the current page link in the navigation menu e.g. "home" without affecting its color in the hover state?

    e.g.

    when on the home page the color of the text of the home button is white

    when I mouse over or hover the color of the text remains white

    how do I change this so......

    when on the home page the color of the text of the home button is gray

    when I mouse over or hover the color of the text is white

    The blog I need help with is timesnewpaulie.wordpress.com.

  2. To change the color of the link in it's resting state, add this to your CSS stylesheet:

    #access ul li > a {
        color: #AAAAAA;
    }

    Change the hex code (#AAAAAA;) to change the color.

    To change the color of the hover,

    #access ul li:hover > a, #access ul ul:hover > a{
        color: #AAAAAA;
    }

    Again, change the hex code to change the color.

  3. timesnewpaulie
    Member

    thanks ... however..... this does not change the color of the link of the current page in its resting state... e.g.

    when on the home page the home link color is white
    when I mouse over or hover the color of the link remains white

    I want to change this so...

    when on the home page the color of the text of the home link is gray
    when I mouse over or hover the colour of the text is white

    ..... i think there is a separate rule affecting the appearance of the link on the page you are currently on... i don't know how to override or change this rule.. but thanks again for your help

  4. The "current_page_item" class can be used to target the color of the menu item for the current. Using zandyring's example, it would become:

    #access ul li.current_page_item > a {
        color: #aaa;
    }

    Same deal for the hover:

    #access ul li.current_page_item:hover > a,
    #access ul ul.current_page_item:hover > a{
        color: #aaa;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic