[HELP] Debut Theme Sticky Header without Announcement Bar

[YuntioR]

Hey there. 

Basically, I just want sticky header for my Shopify store. For all versions - mobile and desktop.

I want sticky header without announcement bar.

Thanks in advance!

Store - www.topdrive.store

[neeravmakwana]

Hi, can you please check option 2 in this link and confirm if it works as expected:

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-...

[YuntioR]

Hey, I tried it already and it didnt work 😞

[MS-WEB-DESIGNER]

Dear @YuntioR 

Hope this will help you

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
 .sticky {position: fixed;top: 0;width: 100%;z-index: 999; max-width: 100%;background: #fff;-webkit-box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);-moz-box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);}
/* End*/

• In the same Assets folder, click to open your theme.js file
• Go to the very bottom of this file and paste the following code:

// Start sticky Navbar 
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        $('.site-header').addClass('sticky');
    }
    else {
        $('.site-header').removeClass('sticky');
    }
});
// End sticky Navbar

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

[YuntioR]

Hey, thanks @MS-WEB-DESIGNER  but nothing happens. 😞

[MS-WEB-DESIGNER]

Ok then need to check backend, please contact us if you need help at task4store@mswebdesigner.com

[GoldenHour]

Thank you so much!!!

I've been trying to fix this for so long and it worked. I'm using Brooklyn theme right now. 

[alejandrort]

Thanks @MS-WEB-DESIGNER ! It worked perfectly for the Minimal Theme.

[alejandrort]

@MS-WEB-DESIGNER, is it possible to have the sticky header without announcement bar, only on desktop? I would like to have my mobile version with sitcky announcement bar (as on mobile the menu is displayed in the announcement bar).

Thanks in advance!

[MS-WEB-DESIGNER]

Yes it is possible