change primary menu color in Responsive theme

• 

  preventiondiaries · Member · Aug 9, 2016 at 10:01 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m trying to change the color of my primary menu on this page:

  https://preventiondiaries.wordpress.com/wp-admin/customize.php?url=https%3A%2F%2Fpreventiondiaries.wordpress.com%2F

  I want to change the color from it’s current black to #377f8c

  I’ve tried this rule, which is not working:

  .menu {
  color: #377f8c;
  }

  Can anyone please advise?

  Thank you,
  Christine

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

• 

  hallluke · Member · Aug 9, 2016 at 10:47 pm

  • Copy link

  You need to set the background-color and turn off some of the gradient effects. Here’s some code to try out, I’ve also set the hover/current menu colour to your dark grey border colour but feel free to change it to whatever hex code you want:

  .menu {
  	background-color: #377f8c;
  	background-image: none;
  	filter: none;
  }
  .menu a {
  	border-color: #377f8c;
  }
  .menu .current_page_item a,
  .menu .current-menu-item a,
  .menu a:hover {
  	background-color: #0D1F23;
  	background-image: none;
  	filter: none;
  	border-color: #0D1F23;
  }

• 

  preventiondiaries · Member · Aug 9, 2016 at 11:18 pm

  • Copy link

  Thank you so much @hallluke for the wonderful and elegant solution! Implemented!