Highlighting a single menu item

nkthen · November 2015

Is it possible to highlight a single menu item with a box or a highlight?

Like this: https://www.sketchapp.com/

You would see that the Buy Now is boxed.

Albert · November 2015

Yes, it is possible. This can be done with custom css. For item, you can set css class name and then under Theme options > Custom CSS & JS > Custom CSS section you can write custom css per menu item.

nkthen · November 2015

Hi, can I know where to do it?

To be specific, here's the link:
http://199.design/199-design/

I would like to have the last menu item "Order" to be boxed with neon green line.

Albert · November 2015

Please set class name for Order item first and let us know after so we can tell you how to do it.

nkthen · November 2015

I'm sorry. I don't know how to set the Order Item.

Where do I do it?

Albert · December 2015

Please look at http://forum.muffingroup.com/betheme/discussion/4075/single-menu-item-styling where we explained how to set custom classes for menu items.

nkthen · December 2015

OK, I got it. I have set the class as "mhighlight"

Albert · December 2015

Ok. So now, to set custom css for this menu item, you need to use below css:

#Top_bar .menu > li.mhighlight a { border: 1px solid #FFF !important; }

For future customization, we suggest to look at http://themes.muffingroup.com/betheme/documentation/#theme-customizations where we explained how to use Firebug for FF.

nkthen · December 2015

Thanks. That is a really good tip! I guess I am one of the culprit for not reading the documentation.

Albert · December 2015

You said that

We're glad to hear that all is clear now.

nkthen · December 2015

Sorry, I've been trying to do this but I think I can't seem to read the code to understand.

I'll like to have a box surrounding the Menu item when I hover over, like this:
http://jellythemes.com/themes/sonoramawp/#

I tried this CSS code:
#Top_bar .main-menu > li.current a { border: 1px solid border-color: #c3121c !important;}

But it doesn't seem to work.

What's the CSS code?

Albert · December 2015

To add those borders, you supposed to use below css:

#Top_bar .menu > li > a { border: 1px transparent solid !important; }
#Top_bar .menu > li:hover > a { border-color: #FFF !important; background: transparent !important; }

Highlighting a single menu item

Comments

This website uses cookies