Organization Theme Menu Bar Color

• 

  happyyellowguy · Member · May 24, 2014 at 3:15 am

  • Copy link
  • Add topic to favorites

  I would like the Menu Bar to be a yellow color. I tried using the customize wizard but it won’t let me utilize a yellow. I even entered a hex code and it still will not change. Is there a CSS code I can utilize?

  Thanks!

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

• 

  thesacredpath · Member · May 26, 2014 at 9:12 pm

  • Copy link

  Hi there, I’m seeing a butterscotch gold/yellow color on your menu bar (#C78213). Is that the color you were wanting?

• 

  happyyellowguy · Member · May 27, 2014 at 12:53 pm

  • Copy link

  Hello

  No I would like a yellow color — I tried using the wizard but did not allow yellow. So I tried entering the hex code #FFFF00 and still no yellow.

  Thanks!

• 

  kathrynwp · Staff · May 29, 2014 at 6:37 pm

  • Copy link

  Try adding this to your custom CSS:

  #navigation {
      background-color: #FFFF00;
  }

• 

  happyyellowguy · Member · May 30, 2014 at 4:33 pm

  • Copy link

  Thanks for the information. I entered that value and it changed but it made it a funky version of yellow. I tried other variations of yellow and it still kept it the funky version. Does anyone know if it automatically tints the color?

• 

  iamtakashi · Staff · Jun 2, 2014 at 12:07 pm

  • Copy link

  If you’d like a solid color as opposed to gradient, you can try with the following.

  #navigation {
  background: #FFFF00;
  }

  Hope this helps.

• 

  happyyellowguy · Member · Jun 3, 2014 at 1:29 pm

  • Copy link

  Thank you iamtakashi — that stopped the gradient bar. But the SubMenus did not change — is there a particular CSS code for the sub navigation?

  Not sure if I can ask this here but do I control the font color within the navigation section?

  Thanks!

• 

  kathrynwp · Staff · Jun 3, 2014 at 3:45 pm

  • Copy link

  To get the sub-menu background yellow as well, change the code provided earlier to this:

  #navigation, .menu ul.sub-menu, .menu ul.children {
  	background-color: #ffff00;
  }

  Not sure if I can ask this here but do I control the font color within the navigation section?

  The colour of the type in your menus is controlled by this chunk of CSS:

  .menu a,
  .menu a:link,
  .menu a:visited {
  	color: #EEEEEE;
  	}
  .menu a:focus,
  .menu a:hover,
  .menu a:active {
  	background: rgba(0, 0, 0, .12);
  	outline: 0;
  	}
  .menu a:hover {
  	color: #FFFFFF;
  	}
  .menu li li a {
  	display: block;
  	background: none;
  	min-height: 0;
  	font-size: 1em;
  	line-height: 2.8;
  	margin: 0px;
  	padding: 0px 12px;
  	}
  .menu li li a,
  .menu li li a:link,
  .menu li li a:visited {
  	color: #EEEEEE;
  	}
  .menu li li a:focus,
  .menu li li a:hover,
  .menu li li a:active {
  	background: rgba(0, 0, 0, .12);
  	outline: 0;
  	}
  .menu li li a:hover {
  	color: #FFFFFF;
  	}
  #navigation .menu li.sfHover:hover a {
  	color: #FFFFFF;
  	}

• 

  happyyellowguy · Member · Jun 4, 2014 at 2:50 am

  • Copy link

  Thank you so much for your input and the CSS code!

• 

  kathrynwp · Staff · Jun 4, 2014 at 1:07 pm

  • Copy link

  You’re welcome! If you have any other questions feel free to start a new thread.