Sticky/Back on scroll Header not working on mobile

[matham]

Hey everyone,

I’m having an issue with my header on mobile and I can’t figure it out. On desktop everything works perfectly, but on the phone it breaks.

On mobile, the sticky header isn’t actually sticky. It stays at the very top and doesn’t come back when scrolling. I’m using a back-on-scroll header, Sense Theme.

The burger menu also behaves wrong on mobile. When it’s open, the menu itself is scrollable and the page behind it still scrolls, instead of being fixed. Not sure if this is related to the header issue or a separate problem.

I suspect there might still be some leftover custom code from an old transparent header or overlay setup that’s interfering, but I’m not 100% sure.

Store URL: www.motifartwork.com

Any ideas or help would be hugely appreciated!

[Dan-From-Ryviu]

You can add this code to Custom CSS of your theme settings and check again.

body .section-header { position: fixed; }

Best regards,
Dan from Ryviu: Product Reviews App

[matham]

Hey Dan,
The Sticky header works again with this code, thanks for that!!
One big issue tho: My announcment bar will be overlaying the header and on desktop the headers width will only be ca 40% when this code is applied. It´s very odd.

[Dan-From-Ryviu]

My bad, please update the code to this

@media (max-width: 749px) {
    body .section-header { position: fixed; }
}

[tim_1]

The problem is because of this code injected by Foxify(?)

@media (max-width: 749px) { 
  html.x-page, html.x-page body {overflow-x: hidden !important}
  .foxify-main { 
    overflow: visible !important; } 

    html.x-page:has(.x-main-product), html.x-page body:has(.x-main-product) {overflow-x:hidden !important}
  }

Which sets overflow:hidden on html and body elements.
overflow: hidden prevents sticky elements from actually sticking.
Because of media-query this only happens on mobile.

One option to fix this is to use overflow: clip instead.

Since the code is added by an App, you should contact the app developer.

Alternatively, you can try overriding these by adding your own code like this into “Theme settings”=> “Custom CSS”

@media (max-width: 749px) { 
  html.x-page, 
  html.x-page body {
     overflow-x: clip !important;
     overflow-y: visible !important;
  }
  html.x-page:has(.x-main-product), 
  html.x-page body:has(.x-main-product) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

[matham]

Thanks so much! Was looking for a fix for long long time … This fixed it :>