Main Nav Menua Change background-color on Hover (width of text only)

Amazing, thanks!

One more question. Trying to set the line height a big larger so that more of the background color shows above and below the text. currently using this CSS:

.menu-item a:hover {
line-height:1.6em;
display:inline;
background-color:#ffff80;
text-decoration:underline;
}

But adjusting line height has no effect on the height of the hover state. So basically I want to add 10px top and bottom to the background color on hover. But keep the left and right boundary on the hover to be flush with the edge of the text itself.

Thanks!

Karl

That worked, thanks!

Karl

p.s. Amazing support! You guys rock!!

Had to re-open this one…

I’m using the code:

.main-navigation .main-nav ul li a {
padding-left: 0;
padding-right: 0;
margin-right: 36px;
}

To set the margins and padding for the main nav menu and it works. But this also affects affects the menu margins for mobile. Can I get the CSS that will only affect desktop / tablet but not change the margins for the nav menu on mobile? Need mobile menu layout to remain default for now.

Thanks!
Karl

Amazing, thanks!!

Hey sorry to re-open this again but I’m seeing some strange behavior on the menu during the hover state.

I’m trying to have the hover state change the background color just for the text and not the entire area of the menu item. Using the following CSS:

.menu-item a:hover {
background-color:#ffff80;
text-decoration:underline;
}

But the hover state extends to the full height of the menu (all the way to the top and bottom border) Ideally I’d like the hover state to only appear behind the text itself and only happen when the user hovers over the text itself.

You can see an example on: https://36exposures.com

I’ve tried changing the CSS to:

.menu-item a:hover {
background-color:#ffff80;
text-decoration:underline;
display:inline;
}

But this creates a confusing situation where the hover state behaves erratically. If you start your hover on the text then move your mouse off the background expands to the full height of the menu but sort of flickers so it appears slightly lighter. If you start your mouse at the borders of the menu and inch toward the text then the text decoration:underline appears (without background color) and is flickering until you’re over the text itself again (at which point the hover behaves as expected).

A bit confusing but I’m hoping you can help with what I might be doing wrong there! I’m thinking the display:inline is causing the issue but not sure how ele to case the hover state to be limited to the background of the text itself rather than the area around the text.

Example image of the issue at: https://imgur.com/HNrcvPH

Thanks for the reply… I’m the worst with CSS!

Your solution “mostly” fixes the problem but now if you mouseover the text then slowly move the mouse away (up or down toward the border of the menu area) you’ll see the full height of the menu flashes with the background color for a split second. This only happens when you move the mouse from on top of the text away and not if you move the mouse slowly towards the text.

Not sure what’s causing that but it almost looks as if the very edge of the menu area (the top and bottom single pixel border) for each of the menu items is triggering a different hover state for the menu area itself?

And also, now the bottom menu in the footer is flashing yellow when after you mouse-off the hover state. Only the text-decoration:underline is being set on hover for the secondary menu in the footer.

I sent access codes via private info if you wanted to have a closer look…

Thanks!!

Karl

Yay!! You’re amazing!! Thanks so much!!!! 🙂