(Mobile) Bricks Sticky On-scroll header AND overflow-x: hidden

How To
1

Hi!

I have a design which needs overflowing images. I have disabled horizontal scroll with ‘overflow-x:hidden’ on the body, which works fine for the display, but now I find that the Bricks header is not sticky on scroll on mobile.

After applying ‘overflow-x:unset’ on the navigation, it is now sticky on scroll again, but the scrollbar appears.

Does anyone have tips on how to keep the sticky on scroll behaviour working in this case?

Thank you!

Link to site in progress: Home - Mad Quality

2

honestly for me the sticky header worked just fine on mobile (tested firefox and chrome on windows).

Maybe try putting this overflow-x: hidden on the <main> tag (#brx-content). This way it shouldn’t effect the header-template.

Sitenote: I’d suggest using overflow-x:clip instead of hidden, cause of some quirks with useing hidden on only one axis. But use hidden as a fallback with a @supports-rule, because ‘clip’ is “only” 92% supported

Cheers

3

@SuatB This is it! Thank you so much :raised_hands: Hope this helps others who face the same problem.

1 Like