Changing Color of Menu Tabs

rartus · Member · Jan 9, 2015 at 8:32 pm
Copy link

Add topic to favorites
Is there a way for me to individually change the colors of the tabs on my menu? Like if I wanted to make one blue, one red, one green etc…

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 9, 2015 at 8:46 pm
Copy link
Hi there, yes, what you can do is to target the specific menu item by menu item id. Here is an example for the about (98) and Testimonials (97) menu items.
```
#menu-item-98 a {
    background: #cc0000;
}
#menu-item-97 a {
    background: #44dd55;
}
```
If you also wanted to change the hover color for the individual tabs, you can add this also.
```
#menu-item-98 a:hover {
    background: #dda144;
}
#menu-item-97 a:hover {
    background: #dd44cd;
}
```
I used the web inspector in my browser to find the menu item ids. If you are not yet familiar with the web inspector tool in your browser, take a look at our support document on How to Find Your Theme’s CSS, which has some brief screencasts to get you started using it. It makes working with CSS much easier.

And here are a few more useful CSS related posts to help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/
http://dailypost.wordpress.com/2013/06/21/css-intro/

Intro to CSS: Previewing Changes with the Matched Rule Pane
thesacredpath · Member · Jan 9, 2015 at 8:47 pm
Copy link
Oh, and if you need to change font colors on the individual tabs, you can simply add a color declaration to the rules like this:
```
#menu-item-98 a {
    background: #cc0000;
    color: #ffffff;
}
```
rartus · Member · Jan 12, 2015 at 4:53 pm
Copy link
Thank you very much for your help. My only other question is how do you know what to put in to background to get the certain colors you want?
staff-happychia · Staff · Jan 12, 2015 at 5:38 pm
Copy link
You can refer a CSS color codes chart like this: http://www.w3schools.com/cssref/css_colorsfull.asp
rartus · Member · Jan 13, 2015 at 1:32 pm
Copy link
Thank you. Is there a way I can bold the font in the menu tabs?
staff-happychia · Staff · Jan 13, 2015 at 5:41 pm
Copy link
Sure. Add the following additional rule in each of the styles you have already in place to set the background color to the tabs.

font-weight:bold;

So the complete style for each tab would be as following. Repeat this for each menu item.
```
#menu-item-108 a {
    background: #BA020B;
    color: #FFF;
    font-weight:bold;
}
```
Please note that you will have to end the color style with a semicolon (;) for the font weight rule to be effective. Currently semicolon is not there at the end of color: #FFF
rartus · Member · Jan 13, 2015 at 8:56 pm
Copy link
Sorry to keep badgering, my boss loves to tinker with this thing. Is it possible for me to change the actual font of the menu bar and can I make the bar itself thinner?
staff-happychia · Staff · Jan 14, 2015 at 8:00 am
Copy link
No worries. I love to help WordPress users :-)
```
.main-navigation li {
font-family: serif;
}
```
serif is a generic font so please change it to some specific font you wish to use. Also specify a few fallback fonts separated by commas so your visitor not having your choice of font available on their computers will see one of the fallback fonts.

Please don’t hesitate to let me know if you face any trouble making your font work.
designsimply · Member · Jan 18, 2015 at 8:23 pm
Copy link
and can I make the bar itself thinner?

The padding on the links inside the main menu basically control its overall height. You can adjust it like this:
```
.main-navigation a {
	padding: .2em 1em;
}
```
Change the .2em and 1em values as needed.
designsimply · Member · Jan 18, 2015 at 8:26 pm
Copy link
Btw, the customizations on http://connecticutpiblog.com/ look really good!

No items found.