[Resolved] Site hero is shifting to the side when site changes from site-nav to sticky-nav

[Matt]

Hi There,

I have tried to use the sticky nav in two recent sites and it seems to be making the hero image jerk when the nav changes from static to sticky and back again. This has never been a problem before. I have shared a site I am working on at the moment where it is happening.

It is happening on iphone 11 – safari. (desktop etc. is fine)

Cheers

Matt

[Tom]

Hi there,

Strange one – can you see if the following CSS fixes it?:

nav#sticky-placeholder {
    height: auto;
}

[Matt]

Hi Tom, thanks for this.

It looks like the problem is with the ‘hide when scrolling down’ option.

I added the css code you gave me. When ‘hide when scrolling down’ is not used it works as it is meant to with no bounce.

When I use ‘hide when scrolling down’ the css you gave me does make it a lot better but there is still a slight, but noticeable bump when scrolling down slowly but nothing like as big as it was before.

At the moment I have left the ‘hide when scrolling down’ option ON.

Cheers

[David]

Hi there,

what if you give the sticky-nav a min-height eg.

nav#sticky-placeholder {
    height: auto;
    min-height: 75px;
}

[Matt]

Yes that worked. I adjusted the min-height to 70px and it worked perfectly.

Thanks both for fixing this for me, I appreciate you guys and also the awesome theme!

Cheers

Matt

[David]

Glad to hear that!

[Author]

Posts