Debut theme : Fixed navigation bar issues ON MOBILE

[Maxime_Breton_V]

Hello everyone,

I am currently using the debut theme. I added a fixed header so the navigation bar stays when i scroll down the page.

The navigation bar scrolls down perfectly both on desktop and mobile.

However, when I click on my "hamburger" style menu on Mobile after scrolling down, it loads the menu at the point I was on the page and send me back up to the top of the page. A white space of the size of the menu is added to the top of the page. When I scroll back down to find the menu, it is behind my content and I cannot click on any links.

How can I make the menu appear properly once I have scrolled down the page?

The following code was used to add a fixed header to my website :

    header.site-header {
    padding-top: 0px;
    position: fixed;
    z-index: 999999;
    background-color: rgba(255,255,255,0.92);
     }

Thank you!

[Maxime_Breton_V]

By the way, here is my mobile nav wrapper code!

/*================ Mobile nav wrapper ================*/
.mobile-nav-wrapper {
  @include transform(translate3d(0, -100%, 0));
  position: absolute;
  background-color: $color-body;
  transition: $transition-drawer;
  display: none;
  overflow: hidden;
  width: 100%;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid $color-border;
  }

  &.js-menu--is-open {
    display: block;
  }
}

.mobile-nav--open {
  .icon-close {
    display: none;
  }
}

.mobile-nav--close {
  .icon-hamburger {
    display: none;
  }
}

[Rogelio]

I have the same issue, I'm trying to figure it out as well.

[Benjamin1]

Same issue here. 

Anyone sort this out yet?

[tim]

Guys, check this thread: https://ecommerce.shopify.com/c/ecommerce-design/t/navigation-bar-drops-down-in-the-middle-of-the-sc...

Pay attention to amend the javascript code according to what element you assigned the position:fixed property.

[useless_essenti]

can anyone help me at all, i have tried to change the code for my header bar to be fixed and it has ruined my whole website from top to bottom.

be careful who you listen to on these forums.

any help would be greatly appreciated

[JustPea]

Hey Everyone!

We recently implemented a sticky nav bar on the Debut theme that will auto-hide on scroll down and re-appear on scroll up. It's really simple, and we hope it will be helpful to some of you!

Instructions here.

[Isabella_Araujo]

Hi Maxime, 

Thanks for your answer, I am having the same problem.

I tried your code but now my header menu bar sits fixed in the middle of the website and not up to the top as I would like that to be. 
Could you please help me further?

My shop: https://brazilborn.com.au/

Thanks a lot.

[jonas9]

See fix here: https://ecommerce.shopify.com/c/ecommerce-design/t/debut-mobile-menu-issue-477081#comment-563388

[MS-WEB-DESIGNER]

Hello,

Greetings !

As an Official Shopify Expert and Partner We would be happy to help you. 

Please reach us at:

Website: https://www.mswebdesigner.com/pages/get-started
Skype: shopify.mswebdesigner@gmail.com
E-mail: admin@mswebdesigner.in
Phone: +919748230320

Thanks & Regards

MS Web Designer Team
Official Shopify Expert and Partner
https://experts.shopify.com/ms-webservices