[HELP] Debut Theme Sticky Header without Announcement Bar

YuntioR
Excursionist
15 0 9

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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
Excursionist
15 0 9
Hey, I tried it already and it didnt work
0 Likes

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.

 

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
YuntioR
Excursionist
15 0 9

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

0 Likes

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

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes