Change default menu color

• 

  jordynntaylorbarnhart · Member · Mar 9, 2019 at 9:22 pm

  • Copy link
  • Add topic to favorites

  I changed all of the buttons on my site from purple to yellow and now I want to change the color of the menu from purple to yellow but it won’t let me. It shows up as a purple menu button on mobile and when I hover over the menu it turns the words from black to purple.

  I tried looking at tutorials but they all say go to ‘appearance’ in my dashboard and its not there. I also tried the CSS class but didn’t work.

  The theme is Business by Automattic. Not sure if its possible but thought I’d give it a shot.

  Thanks :)

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

• 

  charleybea · Member · Mar 11, 2019 at 1:20 am

  • Copy link

  Hello @jordynntaylorbarnhart,

  You can fix this with some custom CSS as long as you’re on the Premium or Business Plan.

  To add CSS using the editor, go to your Customizer and click on the CSS tab.

  Copy and paste the following code at the bottom of the editor:

  /* CHANGES TEXT LINKS FROM PURPLE TO YELLOW */
  .main-navigation>div>ul li.current-menu-item a {
  color: #f0d975;
  }
  
  /* CHANGES TEXT HOVER COLOR FROM PURPLE TO YELLOW */
  a:hover {
  color: #f0d975 !important;
  }
  
  /* CHANGES MOBILE BUTTON COLOR AND HOVER COLOR */
  .menu-toggle {
  background-color: #f0d975;
  }
  
  .menu-toggle:hover {
  background-color: #f0d975;
  }

  If you give this a try, let us know how it goes :)

• 

  jillirealtypdx · Member · Mar 19, 2019 at 9:13 pm

  • Copy link

  Hi – I copied your lines of code to change the mobile menu button (from “CHANGES MOBILE BUTTON COLOR AND HOVER COLOR */” onward) and it does change when it hovers but does not when normal. I have tried different combinations but only hover works. Any idea what the issue could be? I’m also trying to change the color of the line along the top of the drop down menu. I’m using Ixion. Thanks!

• 

  charleybea · Member · Mar 19, 2019 at 9:33 pm

  • Copy link

  Hello again,

  It’s possible that the original color is overriding the new code, so I’ve adjusted for this. Try the new code I’ve pasted below:

  /* CHANGES TEXT LINKS FROM PURPLE TO YELLOW */
  .main-navigation>div>ul li.current-menu-item a {
  color: #f0d975 !important;
  }
  
  /* CHANGES TEXT HOVER COLOR FROM PURPLE TO YELLOW */
  a:hover {
  color: #f0d975 !important;
  }
  
  /* CHANGES MOBILE BUTTON COLOR AND HOVER COLOR */
  .menu-toggle {
  background-color: #f0d975 !important;
  }
  
  .menu-toggle:hover {
  background-color: #f0d975 !important;
  }

  I’m also trying to change the color of the line along the top of the drop down menu.

  I don’t see a drop down menu, but I do see a faint line that spans across the page underneath the logo area on the left and the main navigation on the right at the top of the page. If you’re referring to that area, here’s the code that targets that line (change ‘gray’ to the color you wish it to be):

  .site-header {
  border-bottom: 1px solid #f0d975 !important;
  }

  I hope this helps. Let me know if you have further questions :)