[xsangiorgiParticipant]

On my website I have navbar and breadcrumbs stuck to the top.
When I’m on my contact or news page for example and I scroll down it has this moment where it snaps and then the page shoots a bit up.

When holding the scrollbar and slide it up and down you can really see this switching happening when you reach a certain point.

This is not very smooth and pleasant for visitors. Is it possible to make this transition smoother? N
http://foodforestry-development.nl/

[RupokMember]

Hi there,

Thanks for writing in! It’s because you are using fixed navbar that’s switching from relative positioning to fixed. You can make the navbar permanently fixed to avoid this.
You can add this under Custom > CSS in the Customizer.

.x-navbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.x-main.full {
  margin-top: 50px;
}

Hope this helps.

Cheers!

[xsangiorgiParticipant]

Thanks for the suggestion. That does work, yet it also moves the navigation bar on the homepage to the top and fixes it there.

I’m using Ethos to have the bar first sit on the bottom with the opening screen and then later move to the top when scrolling down. when going to pages (other than home) I want to keep it at the top.

Hopefully you can provide me with another way to make this more smooth.

[Paul RModerator]

Hi,

Please change the code given above to this.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 103px;
}

Hope that helps

[xsangiorgiParticipant]

Thanks for the suggestion but it still has the snapping happening.

[Rue NelModerator]

Hello There,

Could you please use this custom css that adds a transition to the navbar?

.x-navbar, .x-navbar-wrap {
    transition: all 1s linear;
}

Hope this helps.

[xsangiorgiParticipant]

To bad,

it is still snapping

[RadModerator]

Hi there,

It’s snapping depending on the speed of scroll. Let’s add this CSS

.masthead {
min-height: 227px;
}
.x-navbar {
    transition: all 0.5s linear;
    top: -51px;
    position: static;
}
.x-navbar-fixed-top {
    top: 0 !important;
    position: fixed !important;
}

Just need to remove “SearchSearch”, it’s not part of the calculation.

Hope this helps.

[xsangiorgiParticipant]

He thanks again for the suggestion. It does sort of work but not entirely.

If I leave the
.masthead {
min-height: 227px;
}

at 227px it makes it smoother.
But I have page title disabled and the 227px moves the page lower increasing the distance between navbar and the page below it.
when I make the masterhead 120px the snapping happens sort of again.

Left it like this for you so you can see it for yourself

[RadModerator]

Hi there,

Hmm, I can’t tell the difference. It’s smooth to my end. Would you mind providing a screen recording?

How about this,

.masthead {
min-height: 120px;
}
.home .masthead {
min-height: 227px;
}

Thanks.

[xsangiorgiParticipant]

Yes, you did it. Now it is super smooth with no glitchy point when selecting the scroll bar and move it down.

Before mousewheel was sort of smooth.

Now both are super smooth!

[RadModerator]

Glad to hear that, my pleasure helping 😉

[Author]

Posts