[Resolved] Sticky navigation not working on mobile

[Espresso]

Hi there,

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

https://www.espressotranslations.com/

[David]

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 ?

[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?

[David]

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;
  }
}

[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?

[Elvin]

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;
}

[Espresso]

Perfect! Thanks for your help!

[Elvin]

Nice one. Glad you got it sorted. 😀

[Author]

Posts