[Resolved] Sticky navigation not working on mobile

Home Forums Support [Resolved] Sticky navigation not working on mobile

Home Forums Support Sticky navigation not working on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1649966
    Espresso

    Hi there,

    sticky navigation with hide on scroll is not working for mobile. Anything we are doing wrong?

    https://www.espressotranslations.com/

    #1650065
    David
    Staff
    Customer Support

    Hi there,

    the sticky mobile header is working for me – are you wanting the top element ( language selector / quote buttons ) to also be sticky like the desktop ?

    #1650068
    Espresso

    It is currently sticky. However when I scroll up the navigation overlaps the top element. How can we make appear the navigation under the top element on scroll only for mobile?

    #1650576
    David
    Staff
    Customer Support

    Not really, we can adjust the position of the Sticky Mobile header with this CSS:

    #mobile-header.is_stuck.sticky-nav-scrolling-up {
      top: 62px !important;
    } 

    But it creates a different problem, when you scroll to the top of the page it will cause the nav to jump into place.

    An alternative would be to move your topbar to the bottom of the mobile device:

    @media(max-width: 768px) {
      .topbar {
        position: fixed;
        bottom: 0;
        top: unset;
        width: 100%;
      }
      body {
        margin-bottom: 62px;
      }
      .generate-back-to-top {
        bottom: 92px;
      }
    }
    #1650744
    Espresso

    Hey David,

    this solution is fine:

    #mobile-header.is_stuck.sticky-nav-scrolling-up {
    top: 62px !important;
    }

    Is there any way that when we scroll up the nav goes behind the top bar and not in front of it?

    #1651000
    Elvin
    Staff
    Customer Support

    Hi there,

    Is there any way that when we scroll up the nav goes behind the top bar and not in front of it?

    You can give your .topbar a z-index value higher than 100 so it goes in front of the nav bar.

    Example:

    .topbar{
    z-index: 110;
    }

    Or simply add it in to the set you’ve already written:

    Example:

    .topbar {
        position: sticky;
        border-top: 2px solid #F7CB45;
        z-index: 110;
        position: -webkit-sticky;
        top: 0px;
        z-index: 110;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1651287
    Espresso

    Perfect! Thanks for your help!

    #1651455
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted. 😀

    A wise man once said:
    "Have you cleared your cache?"

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