Ad

Shopify Sticky Navbar On Mobile Size Is Not Showing?

- 1 answer

I have shopify store on which i have header navigation bar. And i want this sticky header bar stick to the top when screen resized to mobile size. in my current situation sticky navigation bar is working on desktop view but when screen resizes then it disappears. I want this header bar stick to the top in this way

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header

Please tell me how to make it sticky on mobile size?

Ad

Answer

The code that is used on w3 schools works on mobile. What I believe is happening (Without a link to your shopify site I can't be 100% certain) is that your shopify theme has 2 different navigation bars and you're only applying the code to the desktop bar. Apply the code to the other header, since it is not being displayed adding the class to the hidden element should not cause any issues.

if (window.pageYOffset >= sticky) {
  header.classList.add("sticky");
  mobileheader.classList.add("sticky");
} else {
  header.classList.remove("sticky");
  mobileheader.classList.remove("sticky");
}
Ad
source: stackoverflow.com
Ad