[Resolved] sticky menu – reduce padding on hover

Home Forums Support [Resolved] sticky menu – reduce padding on hover

Home Forums Support sticky menu – reduce padding on hover

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1578883
    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.

    #1579162
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1586240
    Gary

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

    #1588544
    Elvin
    Staff
    Customer Support

    Nice one. No problem. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.