underline/border text on menu hover?

Hi,

How can I underline or put a border (like 2px) when I hover the header menu? I didn’t find the menu hover customization.

Hello,

Thank you for your question.

Try to add the following code snippet to the Custom CSS section in Theme Settings to add borders to your menu items

.main-nav .menu > li > a:before {
    content: "";
    position: absolute;
    top: 60%;
    left: 13px;
    right: 13px;
    height: 2px;
    background: black;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.main-nav .menu > li:hover > a:before {
    opacity: 1;
    visibility: visible;    
}

Hi,

unfortunately, it didn’t change anything 🙁

Can I just underline the menu when it’s hovered?

Could you please provide your web-site link so we could take a look and see why this code isn’t working? It is difficult to help without access to your web-site.

Sure, follow the link below

We just visited your web-site and it works for us. Could you specify what browser do you use?

Oh, sorry. It wasn’t before (i don’t know why) but now it’s working perfectly! Thank you so much! 🙂

How can I add the same thing to the submenu?

Try this code also

.main-nav .menu > li > a:before,
.main-nav .menu > li.menu-item-design-default ul li a:before {
    content: "";
    position: absolute;
    top: 60%;
    left: 13px;
    right: 13px;
    height: 2px;
    background: black;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.main-nav .menu > li.menu-item-design-default ul li a {
    position:relative;
}
.main-nav .menu > li.menu-item-design-default ul li a:before {
    top: 80%;
    left: 15px;
    right: 15px;    
}
.main-nav .menu > li:hover > a:before,
.main-nav .menu > li.menu-item-design-default ul li:hover a:before {
    opacity: 1;
    visibility: visible;    
}

Hi,

Isn’t work this time 🙁

I’ve tried w/ chrome and microsoft edge.

We found that code doesn’t look as we sent it to you, please check

Oh sorry. Probably it was my mail client that changed the “>”.

Now it’s working perfectly! Thanks again guys! You rock!!

You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

And we would be glad if you will rate our theme with 5 stars on themeforest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance 🙂

[Author]

Posts