[AndyParticipant]

Hi!

I want nothing to happen when I hover over or click on one specific menu item.

I have temporarily given the “About” link at roadtripsharing.com the .no-hover class to demonstrate.

.no-hover a:hover {
background: transparent;
cursor: default;
text-decoration: none !important;
box-shadow: none !important;
}

The cursor style works but the other ones aren’t coming through.

From other forum threads I thought box-shadow would work but maybe there’s something else going on.

If it could not function as a link at all and not even need a # as a placeholder (which is what I’m doing for the real link location, it’s on a logged-in menu item otherwise I’d share it), that would be the best.

Thanks.

[ThaiModerator]

Hi There,

Please update your custom CSS to this:

.x-navbar .desktop .x-nav>li.no-hover>a:hover>span {
    background: transparent;
    cursor: default;
    text-decoration: none !important;
    box-shadow: none !important;
}

Hope it helps 🙂

[AndyParticipant]

Thanks Thai,

That works in part.

Current custom CSS is

.no-hover {
padding-bottom: 20px;
margin-top: -20px;
}
.x-navbar .desktop .x-nav>li.no-hover>a:hover>span {
background: transparent;
text-decoration: none !important;
box-shadow: none !important;
}
.x-navbar .desktop .x-nav li>a>span:after {
display: none;
}

(Using the pointer cursor on hover after all.)

The first .no-hover style is due to the fact that I’m using a shortcode in the menu item and it has extra padding or something that sets it lower than it should be.

Here’s a very quick video of what’s happening, using the actual link location (decided it’s okay for it to be a link but the underline etc has to disappear):

http://screencast.com/t/BHvR3pha

As you can see the black underline goes away upon hovering the text but comes back when we hover around it in its container and the sub menu.

Also due to the margin and padding on .no-hover, the submenu is too high up vertically for the nav bar.

There’s a gray horizontal line above the item too, not sure where that’s coming from. The contents of that menu item are:

<table style=”border:none; padding:0; margin:0;” ><tr><td>Howdy [wps-display-name]!</td><td>[wps-avatar size=35px]</td></tr></table>

How would I move the sub-menu down vertically to the bottom of the nav bar, get rid of the gray line above “Howdy {username}! {avatar}” and get rid of the black line on hovering near the text?

In case moving down the sub-menu is a lot to ask, if we could put a nice thick border and border-radius around the entire sub-menu drop down that might also work.

Thank you, very appreciated.
Andy

[RadModerator]

Hi there,

Looks like it requires a login to check it as I can’t find that menu. Would you mind providing a login in private reply?

Thanks!

[AndyParticipant]

Thanks Rad, ah good point. Was just checking in to say I believe I’m going to be using a different solution / using a widget, not because the hover wasn’t working but because of issues with the shortcodes I had in place. Thanks again for being willing to check it out nonetheless. Take care!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts