change text color of navigation menu buttons

• 

  timesnewpaulie · Member · Sep 4, 2012 at 10:46 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  zandyring · Staff · Sep 4, 2012 at 2:35 pm

  • Copy link

  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.

• 

  timesnewpaulie · Member · Sep 5, 2012 at 9:50 am

  • Copy link

  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

• 

  designsimply · Member · Jan 23, 2014 at 10:59 pm

  • Copy link

  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;
  }