Sticky Nav sticking in Webflow preview but not published page ?!

[grantsenior]

Hi.
Here’s my sticky navigation test
http://brand-counsel-testing-site.webflow.io/sticky-navigation-test
Works perfectly, just as I want it.

Here’s exactly the same navigation setup in the working page
https://55-corinthian-drive.webflow.io/v-2/home
The sticking effect does not work. I can’t see why one is working and the other not.

Both use the custom css

.cntrl-nav-pos { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0px; }

I have since adjusted the page so that the above styles manging sticky-position are now in an HTML Embed item that sits just before the div needing to stick to the top of the page. (please note, the actual page now has a changed class for testing, but it’s doing the above). This now works in the Webflow preview mode but does not work in the published link above !?!?

If anybody can spot what is going on, that would be grande. it’s doing my head in a bit. Shared project link below.

Grant

---

Here is my site Read-Only: https://preview.webflow.com/preview/55-corinthian-drive?utm_source=55-corinthian-drive&preview=d3c316a489deb919c1b92e7530713534
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

html, body {
    overflow-x: hidden;
}

The overflow hidden her (body) cause this issue.

You can’t use : overflow: hidden , overflow: scroll or overflow: auto on the parent of a position: sticky element.

Read her under " Not working as expected?":

position: sticky problem

solution:

X-scroll problem - move this style from the body. and use overflow-x for the hero element:

.section-14{
   overflow-x: hidden;
}

Please mark as solution to close this topic. Thanks

[grantsenior]

Thank you! That has indeed solved the issue (and I have learnt something today too!).

For anybody else caught out by this problem, the fix for me was to update the styles from

html, body { overflow-x: hidden;}

to just

html { overflow-x: hidden; }

Grant