Change menu background colour on Able Theme

• 

  zeenatm · Member · Jan 16, 2014 at 12:37 am

  • Copy link
  • Add topic to favorites

  I’m currently using the Customized Able Theme and I’d like to know how to change the colour of the menu background and the continue reading button background colour.

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

• 

  kraftbj · Staff · Jan 16, 2014 at 6:28 pm

  • Copy link

  Howdy,

  The quickest way to have customizations questions like this answered is via our CSS Forums. The team of staff and volunteers there are awesome at CSS. That can be found at https://en.forums.wordpress.com/forum/css-customization

  To change the menu background color, you would need to adjust the CSS code via the Appearance->Customize->CSS area of your site’s dashboard.

  The code being used on your site now is: `.main-navigation, .menu-toggle {
  background-color: rgb( 240, 240, 240 );
  background-image: linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  }`

  By changing the color options, you can adjust your color to whatever you’d like.

  For the Continue Reading button, you can change it by using this code:

  .more-link {
  background-color: rgb( 240, 240, 240 );
  background-image: linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  }

  Same idea as above.

  What color would you like to change them to? I can help with what you would need to add, or the folks in the CSS forums can help too.

  Cheers!

• 

  zeenatm · Member · Jan 16, 2014 at 10:40 pm

  • Copy link

  This is so helpful. Thank you. I’m clueless with CSS though. I was hoping to change the men bar to white and hopefully making the text bigger and bolder.

  As for the buttons I want it the same colour as the links #f3bed6

  Thanks,
  Zeenat

• 

  kraftbj · Staff · Jan 17, 2014 at 3:37 pm

  • Copy link

  If that case, try out this:

  .main-navigation, .menu-toggle { 
  background-color: white; 
  background-image: none;
  }
  
  .more-link {
  background-color: #f3bed6;
  background-image: none;
  }

  You’d add that in the Appearance->Customize->CSS page in your Dashboard, just pasted under what’s already there.

  For the text bigger and bolder, I’d drop a question about that if the CSS forums at https://en.forums.wordpress.com/forum/css-customization with specifically what text you’d like bigger and bolder. They can help guide you on what to add (and often faster than we can respond in general support).

  Cheers!

• 

  zeenatm · Member · Jan 17, 2014 at 5:42 pm

  • Copy link

  Perfect. Thank you.