How to change individual menu button colors

en WordPress.com Forums How to change individual menu button colors

• 

  realagenda · Member · Mar 19, 2012 at 6:09 pm

  • Copy link
  • Add topic to favorites

  I have the enterprise theme. I’d like to know how to change the color of only one tab of the menu, most likely with CSS.

  The address of the site is http://www.real-agenda.com

  Thanks.
  Blog url: http://realagenda.wordpress.com/

• 

  kardotim · Member · Mar 20, 2012 at 10:21 am

  • Copy link

  Do you want to change the background color of one menu item? or do you want to use a different color when you hover over an item.

  Also review this guide to learn more about CSS: http://support.wordpress.com/editing-css/

• 

  realagenda · Member · Mar 21, 2012 at 2:03 pm

  • Copy link

  I wanted to change the color of the background of one single item of the menu bar. While I´m at it, I´d like to learn how to do this to every single item of the bar, in case I decide to do so later. As for the hover over I am OK with having one color for all the items and I already learnt how to change it.

  Thanks!

• 

  staff-blorbo · Staff · Mar 21, 2012 at 11:37 pm

  • Copy link

  Yes, there’s really no direct way to change those. You would need to use CSS through a Custom Design upgrade: http://support.wordpress.com/editing-css/

• 

  realagenda · Member · Mar 22, 2012 at 8:02 pm

  • Copy link

  I have a custom design upgrade already. Can you please walk me through the way I would achieve the changes?

  Thank you.

• 

  designsimply · Member · Mar 22, 2012 at 11:10 pm

  • Copy link

  I wanted to change the color of the background of one single item of the menu bar.

  Each item in the top menu has a specific ID attribute. In your blog, the Technology menu item has ID “menu-item-1255” for example. This means you can change the background color of just that time using CSS like this:

  #menu-item-1255 {
  background: goldenrod;
  }

  Adjust the color as necessary.

  Note that if you wanted to use the hoverimage.gif which you have setup for current menu items and as the background on hover, you can do this instead:

  #menu-item-1255 {
  background-image: url('http://realagenda.files.wordpress.com/2011/11/hoverover.gif');
  }

  While I´m at it, I´d like to learn how to do this to every single item of the bar, in case I decide to do so later.

  To switch to a different menu item other than “Technology”, view the page source for http://real-agenda.com/ in your browser, check to see what the ID is for the menu item you’d like to change, and add a CSS for each ID you’d like to update.

• 

  realagenda · Member · Mar 23, 2012 at 12:25 am

  • Copy link

  Thanks a million. It looks simple. Let’s see if I can implement it.

• The topic ‘How to change individual menu button colors’ is closed to new replies.