[Resolved] Smooth scroll offsetting when sticky navigation is on

[Daniel]

Hello!

On this website https://cutt.ly/qMnUoiz

If you click on the transparent button in the hero header, the smooth scrolling should take you right to the grey block with the word SOMOS, however it doesn’t do it correctly only when the sticky menu is enabled.

Also, when the sticky navigation is displayed, if you slowly scroll back up to the top you will see that in addition to the sticky navigation, a large white space corresponding to the usual navigation area is displayed just before the sticky navigation reverts.

Is there any way to correct both problems?
On the one hand the incorrect scrolling with smooth scroll and on the other hand to avoid the white space of the header being displayed when you go back up.

Thanks!
Daniel

[David]

Hi there,

they are both related, the smooth-scroll position gets offet by the height of the navigation.
But on your site, the unsticky nav which is used a placholder is wrapping to multiple lines, which is creating the white space at the top of the page and the wrong offset.

Options:

a. Add this CSS to your site:

#sticky-placeholder .inside-navigation {
    padding-left: 0;
    padding-right: 0;
}
#sticky-placeholder .menu-bar-items {
    display: none;
}

OR

b. Use the Navigation as Header option in Customizer > Layout > Header.

[Daniel]

Thank you David, both problems have been solved!

Thanks to your explanation, I have understood what is the cause of the incorrect displacement. I will keep it in mind for future projects.

Thanks for your help!

[David]

Yeah its annoying, when you have a navigation floated right in the header, and there is very little space around it, it attracts the additional padding that is applied to the Sticky Nav, which takes up more space and can cause the reflow. We hope to find a better method in the future.

Glad to be of help.

[Author]

Posts