Text color in navigation bar help

• 

  hyacinthgirlbeauty · Member · Sep 19, 2013 at 11:59 pm

  • Copy link
  • Add topic to favorites

  I’m using the Pachyderm theme. I am very new to CSS and have done what I thought would change the colour of the text in the navigation bar but when I visit the site the text is white (and thus invisible).

  I would like to keep my navigation/menu bar white, and the text be #515151. I would like the hover bg colour to be the purple it is currently, and thus the hover text colour to be white (this part is working at the moment). I don’t want the active page title to have a different bg.

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

• 

  designsimply · Member · Sep 20, 2013 at 8:55 pm

  • Copy link

  To change menu colors in the Pachyderm theme, start with this example and adjust the color codes as needed:

  .navigation-main {
  	background: #fff;
  }
  .navigation-main a,
  .navigation-main a:visited {
  	background: #8155cd;
  	color: #fff;
  }
  .navigation-main li:hover > a,
  .navigation-main ul ul :hover > a,
  .navigation-main ul ul a:hover {
  	background: #6636b9;
  	color: #fff;
  }
  .navigation-main li.current_page_item a,
  .navigation-main li.current-menu-item a {
  	background: rgba(255,255,255,.3);
  	color: #515151;
  }
  .navigation-main li.current_page_item ul a,
  .navigation-main li.current-menu-item ul a {
  	background: #8155cd;
  }
  @media screen and (max-width: 600px) {
  	.menu-toggle {
  		background: #8155cd;
  		color: #fff;
  	}
  }

  Note that this example tries to be comprehensive for menu colors. The last block controls the color for menus in Pachyderm on mobile devices.