[Resolved] Adding buttons next to logo upon scroll

[Mike]

Hello,

In the primary menu bar I currently have the site tagline displaying to the right of the logo, however upon scroll the menu becomes sticky and the site tagline disappears leaving an empty space. Is there a way to display two buttons in that area? If so, how can I accomplish that?

Thank you!

[Leo]

Hi there,

What if we just make the entire header sticky with this CSS?

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

Let me know 🙂

[Mike]

Thanks Leo, that’s not a bad idea!

But, is there a way to place a button in that space where the tagline is with a navigation hook element? I’m not sure how to only apply it after scroll.

Or to bring the primary menu closer to the logo, and add the button on the right side of the navigation after scroll might make more sense?

[Elvin]

Hi Mike,

But, is there a way to place a button in that space where the tagline is with a navigation hook element? I’m not sure how to only apply it after scroll.

You can try this hook – generate_before_navigation – and then style it with custom CSS so it only appears when the header is in sticky mode.

Or to bring the primary menu closer to the logo, and add the button on the right side of the navigation after scroll might make more sense?

Or you can use this hook – generate_after_navigation (after the primary menu) which we can also style as well in a similar manner.

you can try these things and tell us when it’s added/hooked to the site so we can inspect the things you’ve added and help out with the CSS write up. 😀

[Mike]

Thanks Elvin, I appreciate your help!

I have it hooked to generate_after_navigation now.

I’d like it to only appear in sticky menu mode and to decrease the space between the logo and the menu to accommodate for the button hooked to the after navigation.

Thanks!

[David]

Hi there,

that hook won’t work in the Sticky Navigation. Best place for it is in the generate_menu_bar_items hook. Then we can provide some CSS to remove it on mobile and static desktop nav.

If you can make that change, and also edit the Buttons Block ( the parent container – not the button ) and give it an Advanced > Additional CSS Class of: sticky-nav-button

Then this CSS:

@media(max-width: 768px) {
    .gb-button-wrapper.sticky-nav-button {
        display: none;
    }
}
.main-navigation:not(.is_stuck) .gb-button-wrapper.sticky-nav-button {
    display: none;
}

[Mike]

David, that is perfect! I really appreciate the help, you guys are the best!

[David]

Glad to be of help

[Author]

Posts