Streaming live at 10am (PST)

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

Hi.
Here’s my sticky navigation test


Works perfectly, just as I want it.

Here’s exactly the same navigation setup in the working page


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)

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?":

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

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

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.