[Resolved] Page content jerks up when sticky menu appears

Home Forums Support Page content jerks up when sticky menu appears

  • This topic has 7 replies, 3 voices, and was last updated 9 months ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1146337
    Ben

    Hi there,

    My page is jumping up at the moment the stick menu appears, jerking the page content up.

    When I scroll my page (admin’s, see attached link) moments after scrolling, when the stick navigation replaces the main navigation, the underlaying page content, including the still visible main header background image, jump up to the top scroll position ‘jerking’ the page content up as the sticky menu appears.

    How can I avoid this jumping content?

    If one scrolls downward, the content should jump back up at the moment the stick menu appears…

    Thanks,
    Ben

    #1146837
    David
    Staff
    Customer Support

    Hi there,

    can you remove the Maintenance Mode ? Or edit the URL you provided to include a login id and password.

    #1147619
    Ben

    Hi David,

    Yes, that removed – you can access the site now.

    Thanks,
    Ben

    #1147946
    David
    Staff
    Customer Support

    Yeah its a known issue when using the floated navigation.
    May find one of the Transition effects in the Sticky Nav option behaves better.
    Let me know,

    #1147969
    Ben

    Hi David,

    I was hoping to avoid using a transition effect in the sticky nav. I found it slightly jarring. So I disabled the effects. It’s not helping.

    Is there a JS or php workaround to for this? A code snippet or something that can prevent the page jumping back to the top when the nav switches?

    Having a deep header is kind of necessary in my case as the primary logo has square dimensions. If the visitors experience the standard logo (in the main nav), it helps with brand continuity between the site and when they visit the store.

    Having to put up with the logo disappearing but the deep background persisting while the user scrolls further down is moderately annoying – particularly when we’re talking every page of the site.

    Ideas?

    #1148424
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a shot:

    #sticky-placeholder {
        margin-top: 0;
    }
    
    #sticky-placeholder .navigation-branding {
        display: none;
    }
    #1148632
    Ben

    Thanks Tom and David!

    That worked. Very happy with the theme by the way. It’s top quality.

    Thanks for putting it together.

    Ben

    #1148731
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.