Strange bug with Body height when publishing that affects sticky nav

[ollivere (Martin Ollivere)]

I’m having a really weird bug with the sticky Nav symbol that I’m using:

When I preview in the designer it works as expected (docks to the top of the screen as page is scrolled all the way down). However, when I publish to test in the browser it gets pushed up at the end of what appears to be the page body which is weirdly getting fixed at a height of 1066px?!

When I inspect it there is some code above the head tag (I don’t know what it is) that also takes up the same height when I hover on it that the body seems to. I’m not sure if that has something to do with it? I’ve removed all custom code and changed all sorts of settings with the nav symbol and the body but just can’t find the issue. Can someone please help?

Here is the read-only link: https://preview.webflow.com/preview/therahive?utm_medium=preview_link&utm_source=designer&utm_content=therahive&preview=803e4698fcbb78279dd6665722cdc1c1&mode=preview

And here is the test url: https://therahive.webflow.io/

I’ve also attached a screenshot showing what I’m talking about.

[felix_hellstrom (Felix Hellström)]

Hey Martin!

What a lovely site you got here.

You should use “position: fixed” instead of “position: sticky” for this.

Try changing it and see if it makes a difference.

Cheers
Felix

[ollivere (Martin Ollivere)]

Hi Felix, thank you very much for responding.
I tried this out and whilst it does stay in position I wanted that little bit of extra space when the nav is at the top of the page hence why i went with the sticky positioning. It’s minor but it makes a difference. Also it was working fine until just recently, I don’t know what changed or what caused it but it was ok before. It seems to be something odd going on with the body height. I’ve added no styles whatsoever in the designer but it suddenly seems to be taking the height of the viewport when I publish to the test url…In the designer it works fine so I thought it might eb some fo the custom code or HTML embeds but when I removed them all one at a time till none left it was still happening

[ollivere (Martin Ollivere)]

I’ve been digging around a lot more and I think the issue is being caused by the first line of code in the Calendly embed (see screenshot) Any ideas why?
:

[ollivere (Martin Ollivere)]

I think I’ve managed to fix this issue. This post in the Calendly forum had some styles which needed to be added to the site’s custom code in order to override the Calendly CSS which was affecting the body: https://help.calendly.com/hc/en-us/community/posts/115004353373-Fix-for-broken-scroll-navigation-when-Calendly-external-css-is-added