Archived topic

Sticky Affiliate Offer on Scroll

1 reply · Started by Christopher on March 29, 2022

Viewing posts 1–2 of 2

March 29, 2022 at 5:44 pm #2171758

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?

March 29, 2022 at 6:33 pm #2171784

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. :)

This archived topic is closed to new replies.

Start building better websites today.