Change color font of navigation menu, also when the mouse is over

• 

  mongopichu · Member · Feb 17, 2015 at 10:26 am

  • Copy link
  • Add topic to favorites

  Hi! I want to change the color font of the navigation primary menu, and also the color of the font when the mouse is over. Can you help me with that? Designfolio theme

  Thanks!

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

• 

  staff-happychia · Staff · Feb 17, 2015 at 6:09 pm

  • Copy link

  Excuse my choice of colors and add the colors you prefer in the following styles :-)

  nav.primary-menu {
  background-color: grey;
  }
  
  #header-container nav li a {
  color: yellow;
  }
  
   #header-container nav li a:hover {
  color: red;
  }

• 

  nicoleweinstock · Member · Feb 17, 2015 at 8:41 pm

  • Copy link

  I’m writing with a similar CSS question about http://www.nicoleweinstock.com. I’m happy with the navigation menu color, but I’m interested in being able to change the color of the navigation menu button font from white to #F5B800 (it’s an acorn squash shade I’d say)

  1) What CSS would I need for that?
  2) Where would I need to copy and paste the CSS? Do I go to “Customizer” and “Customize” on the black right sidebar, delete the “Welcome to CSS” schpeal and paste it there?

  Thanks!

• 

  designsimply · Member · Feb 18, 2015 at 3:34 am

  • Copy link

  nicoleweinstock, you’re using a different theme, so the CSS will be different in your case. Each theme is unique, and so the CSS needs to take that into account.

  To make the color of the main menu font #F5B800 in the Sela theme, add this to your Appearance > Customize > CSS editor:

  .main-navigation a {
  	color: #F5B800;
  }

  You can also make the current page color and hover color slightly darker by adding this as well:

  .main-navigation li.current_page_item > a,
  .main-navigation li.current-menu-item > a,
  .main-navigation a:hover,
  .main-navigation ul > :hover > a,
  .main-navigation ul > .focus > a {
  	color: #be9003;
  }

  Do I go to “Customizer” and “Customize” on the black right sidebar, delete the “Welcome to CSS” schpeal and paste it there?

  Exactly. Also see http://en.support.wordpress.com/custom-design/editing-css/

• 

  mongopichu · Member · Feb 18, 2015 at 7:45 am

  • Copy link

  It works perfect, thank you so much for your help! I changed the colors but only because my designer has bad taste ;-)

• 

  mongopichu · Member · Feb 18, 2015 at 7:46 pm

  • Copy link

  Hi there! Another question. I want to change the font color only in the secondary menu (top Menu), but when I try it change all fonts, included the primary menu. There is any option to fix that? Thanks again!

• 

  designsimply · Member · Feb 19, 2015 at 3:31 pm

  • Copy link

  only in the secondary menu (top Menu)

  Do you mean the one currently showing with the green background that starts with “Home” and “Asesoría Integral”?

  To change the font color in the main menu in the Designfolio theme, you can add this to your Appearance > Customize > CSS editor:

  #header-container nav li a {
  	color: #eee;
  }

  Adjust the color code as needed.

• 

  nicoleweinstock · Member · Mar 3, 2015 at 5:59 am

  • Copy link

  Thanks so much for your help, designsimply. I just moved so I’m quite delayed in my response – apologies!

  Your coding worked great – thank you so much!

• 

  designsimply · Member · Mar 5, 2015 at 6:25 am

  • Copy link

  Cheers :)