▼
Streaming live at 10am (PST)

Strange bug with Body height when publishing that affects sticky nav

Community resources Bugs
#1

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: Webflow - TheraHive

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

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

body-height-issue
body-height-issue1000×153 61.8 KB

#2

Hey Martin!

What a lovely site you got here.

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

Try changing it and see if it makes a difference.
image

Cheers
Felix

#3

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

#4

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

image
image1148×516 49.1 KB

#5

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