Archived topic

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

5 replies · Started by Matt on January 10, 2022

Viewing posts 1–6 of 6

January 10, 2022 at 5:38 am #2075263

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

January 10, 2022 at 8:29 pm #2076117

Hi there,

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

nav#sticky-placeholder {
    height: auto;
}

January 11, 2022 at 2:40 am #2076305

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

January 11, 2022 at 4:44 am #2076430

Hi there,

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

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

January 11, 2022 at 4:55 am #2076434

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

January 12, 2022 at 3:57 am #2077686

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.