[Support request] Sticky Affiliate Offer on Scroll

Home Forums Support [Support request] Sticky Affiliate Offer on Scroll

Home Forums Support Sticky Affiliate Offer on Scroll

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2171758
    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?

    #2171784
    Fernando
    Customer Support

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

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