Sticky position equals side scrolling on mobile

[cdyproductions]

Hi there,

I’ve used sticky positioning on many of my sites and usually I will simply disable it on mobile, however in this particular use case I need an element sticky on mobile too.

I use this code:

.sticky {
position:-webkit-sticky;
position:sticky;
top:100px;
z-index:99;
}
body {
overflow-x:visible
}

The overflow-x: visibile is what is causing the side scrolling issues on smaller devices.

I can’t for the life of me figure out how to get around this. Could you please give me a solution?

I don’t think sticky elements on mobile should be limited by theme capabilities…

Here is the page in question: https://matthewv14.sg-host.com/digital/

Cheers,
David

[tristup]

Hi David,

Thanks for reaching out.
I have checked the page URL, but unfortunately, the problem you described here can’t be recognized. I would request you please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[cdyproductions]

Hi @tristup, you need to view the site on a mobile device and swipe left or right to see the side scrolling issue. You can see the menu stick to the top of the page too. Here is a video https://www.loom.com/share/77be5de5897a4a5caf752bdec0df03ab

When I set the body overflow-x to visible it allows the side scrolling, but if it’s hidden I can’t set sticky elements. Is there any other way to get this affect or work around the current issue?

Cheers,
David

[ruenel]

Hello David,

You can hide the X overflow and set the Y overflow to be visible.

element {
   overflow-x: hidden;
   overflow-y: visible;
}

Having it this way, it will prevent the page from scrolling side ways.

Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Kindly let us know how it goes.

[cdyproductions]

To be honest this is not the response I was looking for and doesn’t apply to my initial question.

It appears it is not possible to achieve sticky positioning in x theme without side scrolling happening.

I ended up using some js and css as a workaround: https://www.w3schools.com/howto/howto_js_sticky_header.asp

Cheers,
David

[ruenel]

Hello David,

It is good to know that you have found a way to get your issue resolved. Thank you for letting us know.

Cheers.