Remove hover underline for custom menu item

[lakong]

If you look at this site:

http://ulm.finjanmobile.com

You’ll see that the last menu item is a custom button. I did this with the following CSS in the customizer:

@media (min-width: 980px) {
#menu-item-56 a {
font-size: 12px !important;
background-color: #8cc34b;
color: #fff !important;
border: 1px solid #8cc34b;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 30px;
margin-top: 20px;
margin-left: 10px;
max-height: 34px;
border-radius: 3px;
}
}
}

This looks just how I want it, BUT I don’t want the underline on hover or if the item is selected. Here was the actual page if the button is clicked:

http://ulm.finjanmobile.com/upgrade/

Any help would be appreciated!

[Prasant]

Hello There,

Thanks for writing in!

Please add following code to remove underline.

.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}

Thanks.

[lakong]

Thanks, this removed underline of current selected page. How about if I want to:

a) remove underline on hover of all navigation option, so current and not current
b) just remove underline (hover and selected) on the last item which I am targeting with the button look. I want that last item to function as a button, so the line doesn’t make sense for it.

Thanks in advance!

[Prasant]

Hello There,

1. If you want to remove underline completely, please add following CSS code:

   .x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
   box-shadow: none;
   }

2. In order to selectively remove underline (in this case button) then we will have to prefix Menu Id along with relevant CSS code:

   li#menu-item-56 .x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
   box-shadow: none;
   }

You can also refer following tutorial to find out navigation id:

Finding Nav Menu Item I.D

Thanks.

[pchastie]

Prasant’s suggestion #2 above is exactly what I need to do.

See “Give” button in top nav bar: https://www.childhopeonline.org/

But it doesn’t work for me. Suggestions? (I did replace the ID with the one for that link following the instructions linked to: 10043)

[nabeel]

Hi again,

Please use this code to remove underline from your custom button:

.x-navbar .desktop .x-nav > li#menu-item-10043 > a:hover > span {
    box-shadow: none !important;
}

Cheers!

[pchastie]

That did it! Thank you!

[nabeel]

Glad we could help.

Cheers!