Debut theme : Fixed navigation bar issues ON MOBILE

Maxime_Breton_V
New Member
2 0 1

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
New Member
2 0 1

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

0 Likes
Rogelio
New Member
5 0 0

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

0 Likes
Benjamin1
Tourist
10 0 2

Same issue here. 

Anyone sort this out yet?

0 Likes
tim
Shopify Expert
2842 113 934

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
useless_essenti
New Member
1 0 0

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

0 Likes
JustPea
Excursionist
15 0 6

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.

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
Isabella_Araujo
New Member
1 0 0

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.

 

0 Likes

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

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes