Changing Menu Color

• 

  txdg · Member · Mar 30, 2017 at 2:03 pm

  • Copy link
  • Add topic to favorites

  Hello!
  I have the karuna theme and would like to be able to change the menu colors. ( the text color, the hover color)

  Thanks!

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

• 

  staff-zinnia · Staff · Mar 30, 2017 at 3:41 pm

  • Copy link

  Hi –

  Click on My Sites > Customize > Colors & Background to customize this. You’ll see a live preview to the right side of the screen. Let me know if you have any other questions.

• 

  txdg · Member · Mar 30, 2017 at 5:03 pm

  • Copy link

  Thanks,
  Although I really wanted to change just the colors of the menu not the entire website. I thought it could be accomplished through CSS Customization.

• 

  sewingpattern · Member · Mar 30, 2017 at 5:45 pm

  • Copy link

  Hello! Try pasting this code snippet into your CSS Customization field:

  .main-navigation a, .main-navigation a:visited {
      color: #COLOR !important;
      display: block;
      padding: 0.8em 0.4em;
      text-decoration: none;
      font-family: "FONTNAME"; }

  Replace COLOR with the hexcode of the color you’d like (such as #333333), and replace FONTNAME with your desired font name in quotes, such as “Times New Roman”.

  Let me know if that doesn’t work, or causes any other problems!

• 

  staff-zinnia · Staff · Mar 30, 2017 at 8:03 pm

  • Copy link

  sewingpattern – thanks for posting this snippet.

• 

  sewingpattern · Member · Mar 30, 2017 at 8:45 pm

  • Copy link

  Very happy to help, lizkarkoski! I just noticed though that I didn’t really solve txdg’s question fully though, sorry… I need to read things more carefully ^-^;

  Txdg – You asked to change the font color and HOVER color (not font style, my bad!). Currently, the hover color will turn into a lighter version of whatever the menu text color. If you’d like to change that to something different, let me know and I’ll come up with an additional snippet. But if you’re fine with that default setting, here is a new code snippet to replace the last one (the last snippet also caused the sub-menu’s color to change, oops):

  .main-navigation a, .main-navigation a:visited {
      color: #NEWCOLOR !important;
  }
  
  .main-navigation ul ul a, .main-navigation ul ul a:focus, .main-navigation ul ul a:hover, .main-navigation ul ul a:visited, .main-navigation ul ul a:visited:focus, .main-navigation ul ul a:visited:hover, .footer-widgets-wrapper, .footer-widgets-wrapper a, .footer-widgets-wrapper a:visited, .footer-widgets-wrapper a:hover, .footer-widgets-wrapper a:focus, .footer-widgets-wrapper button, .footer-widgets-wrapper button:hover, .footer-widgets-wrapper button:focus, .footer-widgets-wrapper input[type="button"], .footer-widgets-wrapper input[type="button"]:hover, .footer-widgets-wrapper input[type="button"]:focus, .footer-widgets-wrapper input[type="reset"], .footer-widgets-wrapper input[type="reset"]:hover, .footer-widgets-wrapper input[type="reset"]:focus, .footer-widgets-wrapper input[type="submit"], .footer-widgets-wrapper input[type="submit"]:hover, .footer-widgets-wrapper input[type="submit"]:focus, .footer-widgets-wrapper .button, .footer-widgets-wrapper .button:hover, .footer-widgets-wrapper .button:focus, .site-footer, .top-bar, .top-bar a, .top-bar a:visited, .top-bar a:hover, .top-bar a:focus {
      color: #fff !important; }

  Simply replace the NEWCOLOR portion of the snippet with the hexcode of the color you’d like. The rest of the code below should remain as-is, as it prevents the submenu text from changing to that new color.

  I hope this snippet works better. Let me know if things don’t go well, though!