[Resolved] Adding buttons next to logo upon scroll

Home Forums Support [Resolved] Adding buttons next to logo upon scroll

Home Forums Support Adding buttons next to logo upon scroll

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1876365
    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!

    #1876394
    Leo
    Staff
    Customer Support

    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 🙂

    #1876418
    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?

    #1876475
    Elvin
    Staff
    Customer Support

    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. 😀

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

    #1877925
    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!

    #1878518
    David
    Staff
    Customer Support

    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;
    }
    #1878590
    Mike

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

    #1879120
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.