Change Menu colour

• 

  minalovesdesigns · Member · Aug 27, 2014 at 12:47 pm

  • Copy link
  • Add topic to favorites

  Hi I’m using the ‘Responsive’ theme and I’m trying to figure out how to change my menu colour. I’ve gone through to the customisation part but all it gives me under CSS is ‘change content widith’ and something about preprocessor which i’m not sure is. I’m new to this CSS stuff. Can someone please enlighten me! Thanks in advance :-)

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

• 

  hallluke · Member · Aug 27, 2014 at 1:17 pm

  • Copy link

  Here are the main ways to select parts of your menu (in order):

  • menu
  • menu text
  • menu – current page
  • menu – hover state
  • submenu
  • submenu – text
  • submenu – hover state

  .menu {}
  .menu a {}
  .menu .current_page_item a, .menu .current-menu-item a {}
  .menu a:hover {}
  .menu li li {}
  .menu li li a {}
  .menu li li a:hover {}

  You need to put some code between the {curly braces}. Try out some of the following declarations, which allow you to set the main colour, background colour and remove background images (the gradient in your current menu):

  color: black;
  background-color: #999;
  background-image:none;

• 

  designsimply · Member · Sep 29, 2014 at 3:22 pm

  • Copy link

  When changing menu colors, I usually copy the menu section straight out of the original theme CSS, remove all the lines that don’t have to do with color, and then swap out the colors. The menu in Responsive is fairly complex since it uses gradients. Here is a more specific example showing the menu background colors swapped out from dark gray to green for the top-level part of the menu only:

  .menu {
  	background-color: #576728;
  	background-image: -webkit-gradient(linear, left top, left bottom, from(#576728), to(#495734));
  	background-image: -webkit-linear-gradient(top, #576728, #495734);
  	background-image: -moz-linear-gradient(top, #576728, #495734);
  	background-image: -ms-linear-gradient(top, #576728, #495734);
  	background-image: -o-linear-gradient(top, #576728, #495734);
  	background-image: linear-gradient(top, #576728, #495734);
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#576728, endColorstr=#495734);
  }
  
  .menu ul li a:hover,
  .menu li li a:hover {
  	color: #484848;
  }
  
  .menu a {
  	border-top: 1px solid #2B3D1E;
  	border-left: 1px solid #2B3D1E;
  	color: #fff;
  	text-shadow: 0 -1px 0 #000;
  }
  
  .menu a:hover {
  	background-color: #3C472A;
  	background-image: -webkit-gradient(linear, left top, left bottom, from(#3C472A), to(#1B3312));
  	background-image: -webkit-linear-gradient(top, #3C472A, #1B3312);
  	background-image: -moz-linear-gradient(top, #3C472A, #1B3312);
  	background-image: -ms-linear-gradient(top, #3C472A, #1B3312);
  	background-image: -o-linear-gradient(top, #3C472A, #1B3312);
  	background-image: linear-gradient(top, #3C472A, #1B3312);
  	color: #fff;
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C472A, endColorstr=#1B3312);
  }
  
  .menu .current_page_item a,
  .menu .current-menu-item a {
  	background-color: #1B3312;
  }

  To change from green to something else, you can use this example as a template and change out the color codes.

• 

  designsimply · Member · Sep 29, 2014 at 3:23 pm

  • Copy link

  Love the knit hats in your blog btw! I just got an amazing blue and purple scarf from a friend this weekend and I love it tons already.

• 

  minalovesdesigns · Member · Sep 29, 2014 at 4:45 pm

  • Copy link

  Thank you for this! Still playing around with colour ideas but at least I can do this now…tried the code and it works perfect.

  And thanks for comment about my knits :)