[Resolved] styling a menu item – make it stand out

[Nam Nguyen]

Hi Support,
I would like to make a menu item standout. For example, along the nav menu items such as Home, About Us, etc, etc, I’d like to do the followings:

1) add a menu item, ie. Parties, and be able to style it with a different type of font, font size, background color.

– Please tell me how I can do this? I’ve done similar thing with another theme by giving it a css class, and style it. Is this the way to do it with this theme?
– Please give me some pointers.

2) How can I add an image to a menu item?

– Is there a way to ‘tie’ an image to a menu item? on top of styling its css class?

The idea is to have something similar to the “parties” button (please see the ‘button’ Parties in the main slider, on the left handside of this slide). The website is

http://ctt-design3.digitalvinesstudio.com for info.

Thanks heaps
Nam

[Tom]

Hi Nam,

1. That’s correct, you would give the menu item a class, and then target it with specific CSS:

.main-navigation .main-nav ul li.my-custom-class a {
      /* custom CSS in here */
}

2. You should be able to add HTML into your Navigation Labels in “Appearance > Menus”. However, I would suggest using a font icon from FontAwesome instead of an image: http://fortawesome.github.io/Font-Awesome/

[Nam Nguyen]

Hi Tom,

Thanks for that.

I’m now trying to make the background of one menu in a different color, yellow, say.

Can you tell me how to style this? I’ve tried a few element, but didn’t seem to get it right.

Thanks

[Tom]

First, you would add a custom class to that menu item.

Then you would do something like this:

.main-navigation .main-nav ul li.my-custom-class a {
      background-color: yellow; /* or use a hex code to be more specific */
      color: #000000; /* this is the text color */
}

[Julia]

Hi Tom,

I want the bars in my nav to be the same color, except for when they are active or “on hover”. Then I want them to have a different one.

I’ve given all of them a different class, but what code should I use to make this happen?

Thanks
Julia

[Tom]

Hi Julia,

The best and easiest way is to use the Colors add-on – it lets you do this all through the customizer.

Otherwise, you can use the current-menu-item class:

.main-navigation .main-nav ul li.current-menu-item a {
      background-color: yellow; /* or use a hex code to be more specific */
      color: #000000; /* this is the text color */
}

[Author]

Posts