[Resolved] sticky menu – reduce padding on hover

[Gary]

Main nav menu items work fine without sticky menu activated – both font and background colours are reversed when hovering, with correct amount of padding. When sticky is activated and one of the left 3 items are hovered, I would like the background height (padding?) to be reduced to match the right 3 items (which are made to look like buttons) – as they do when sticky is not active. I’ve worked most other CSS things out but am struggling with this. Thanks guys.

[Elvin]

Hi,

To clarify: You’re trying to make the the sticky nav fully identical with its non sticky counterpart?

If so, let’s break things down:

The logo for the sticky nav is 4px smaller. (non sticky has 64px, sticky has 60px).

To address this, you can force both of the navigation bar states to have the same navigation site.
Example:

.navigation-branding img{
height: 64px important!;
}

As for the background height, the sticky has a bigger background because it has a larger line-height value (60px for sticky, 40px for non-sticky) and there’s a padding added on each of them (12px on top and bottom):

#menu-item-xxxx a {
    padding-top: 12px;
    padding-bottom: 12px;
}

I understand that this was added to replicate the same height but perhaps this is the better way:

nav#sticky-navigation .inside-navigation {
    margin: 0 !important;
    padding: 20px 0 !important;
}

After setting this, make sure the Menu Item Height is set the same for both the sticky navigation and the primary navigation.

Here’s how it’d look like: https://share.getcloudapp.com/E0u4AbL9

As you can see, it looks really similar. 🙂

[Gary]

Thank you Elvin, very much appreciated. With a little bit of further tweaking that did the trick.

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts