Site logo

[Resolved] Smooth scroll offsetting when sticky navigation is on

Home Forums Support [Resolved] Smooth scroll offsetting when sticky navigation is on

Home Forums Support Smooth scroll offsetting when sticky navigation is on

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2416064
    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

    #2416177
    David
    Staff
    Customer Support

    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.

    #2416262
    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!

    #2416278
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.