Change Navigation Font Color

• 

  shannonrey · Member · Oct 5, 2016 at 8:26 pm

  • Copy link
  • Add topic to favorites

  I’ve added this code to CSS to change the color of my navigation bar to transparent but since the font color of the navigation was white, I now can’t see the navigation. What code can I use to change the font to black so that it now appears?

  #masthead {
  background-color: rgba(255,255,255,1.0);
  }

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 7, 2016 at 11:59 pm

  • Copy link

  Hi there, is for the site title.

  .site-branding .site-title, .site-branding .site-title a, .site-branding .site-title a:visited {
      color: #fff;
  }

  And this would be for the navigation. The first rule is for the main navigation color and the second is for the “current page” menu item.

  .site-header .main-navigation a, .site-header .main-navigation a:visited {
      color: #cc0000;
  }
  .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a {
      color: #44ee44 !important;
  }

• 

  shannonrey · Member · Oct 8, 2016 at 4:05 am

  • Copy link

  Perfect, that’s great. So now the “menu” button on mobile can’t be seen, how do I change the font to black for the menu button? And the button outline to black if there is one.

  Thanks again :)

• 

  nagpai · Member · Oct 8, 2016 at 4:34 am

  • Copy link

  Hi,

  Try this

  .menu-toggle{
  color: #000;
  }

• 

  siobhyb · Member · Oct 10, 2016 at 3:44 pm

  • Copy link

  I’m able to see the menu button while visiting your site on mobile, thanks to the custom CSS provided by @nagpai. :)

  If you have any extra questions then feel free to open a new thread on this forum, @shannonrey.

• 

  shannonrey · Member · Oct 10, 2016 at 6:11 pm

  • Copy link

  Yes thank you both, I do have one more question on this topic. I believe there is also a circle around the Menu button. If so, how can I change the color to black?

  Thank you

• 

  kathrynwp · Staff · Oct 10, 2016 at 7:13 pm

  • Copy link

  Add a second line to the CSS nagpai provided above to get a circle outline on the menu toggle:

  .menu-toggle {
    color: #000;
    border: 1px solid #000;
  }

  For additional questions, please start a new thread as Siobhan mentioned. Thanks!