[Support request] Sticky Affiliate Offer on Scroll

[Christopher]

I want to create a sticky header, but with a custom affiliate offer instead of a navigation (see image in private information). So I want my normal navigation header to disappear once someone scrolls down the page, and this other sticky header appear. What’s the best way I can do this?

[Fernando]

Hi Christopher,

One approach to do this is to turn on Sticky Navigation in Appearance > Customize > Layout > Sticky Navigation and Appearance > Customize > Layout > Header.

Now, for instance, you can try hooking a Block Element somewhere which would be visible in the Sticky Navigation. In my case, it would be visible if I hook it to after_primary_menu: https://share.getcloudapp.com/geum4ybG

With this, I added this class (hide-not-sticky) to the Grid Block: https://share.getcloudapp.com/o0uREXEy

After this, I added this custom CSS code in Appearance > Customize > Additional CSS to hide and unhide stuff on the navigation and the sticky navigation:

nav .hide-not-sticky {
    display:none;
}

nav.is_stuck .hide-not-sticky {
    display:block;
}

nav.is_stuck .main-nav, nav.is_stuck .navigation-branding, nav#mobile-header.is_stuck .menu-toggle {
    display:none;
}

nav.is_stuck .inside-navigation{
    justify-content: center;
}

Here is the result: https://share.getcloudapp.com/12ugoz7y

You’ll need a little more CSS or customization in the settings of your Block Element to achieve a better look.

Hope this clarifies. 🙂

[Author]

Posts