Brooklyn Theme Sticky Navigation Bug/Issue (Disappears on click when scrolled)

New Member
2 0 0

Thanks to previous topics in this awesome community, I was able to find the code snippet I needed to do a fixed header on my site. It works fine on desktop, but there is a problem on mobile. The issue is whenever the hamburger menu is clicked and the menu opens, the whole menu and the header bar jump back to the top if I am scrolled at all on the page. The issue seems to be tied to this code snippet, as it only appears once you apply a position: fixed; to the header-wrapper. I've even tried keeping my existing theme code and ONLY adding that additional position property to the header-wrapper, and the issue still appears. Therefore, I believe the problem is elsewhere with something overriding the position on click, or something along those lines.

 

I've attached the community code snippet I've used, as well as screenshots of what is happening so you may help diagnose.

 

Code:

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

This is the menu opened while still at the top of the page. As you can see, everything works as it should:

Screen Shot 2019-12-13 at 7.57.48 PM.png

 

This image is with the menu closed on scroll. Everything is fine and you can see that the header bar is fixed:

Screen Shot 2019-12-13 at 7.58.42 PM.png

 

Now here is the issue in the images below. When you are scrolled even 1px down, and click the hamburger menu, you will see the menu contents are essentially gone, and the header bar also vanishes as it opens. If you are scrolled closer to the top of the page, you will see that what is actually happening, is that when the menu is activated, both the header bar, and the contents of the menu jump to the top of the page. The same happens with the header when you open the cart as well, but for some odd reason, the cart contents actually function correctly and stay with you no matter where you are scrolled. The header however is still missing in that instance as well. 

 

Scrolled a good amount; header and menu completely gone.

Screen Shot 2019-12-13 at 7.58.34 PM.png

 

Scrolled a few pixels; can still see bottom of menu and part of header bar:

Screen Shot 2019-12-14 at 12.43.24 PM.png

 

Finally, the cart. When it's opened while you are scrolled, it stays with you and functions correctly, but like with the menu, the header jumps to the top:

Screen Shot 2019-12-14 at 12.45.54 PM.png

 

If you'd like to check it out, here is the site link: https://www.vrsociety.net

It's currently offline; here is the PW: shopifyhelp

 

I've tried multiple modifications to the code but can't seem to find the source of the problem, so i've reverted it all back to the original theme code plus the sticky snippet for your diagnosis. I'm semi capable in my front-end capabilities, as I modified this theme myself, but I can't make sense of this. 

 

Thanks in advance, and I hop this thread helps others

-Danny

0 Likes
New Member
2 0 0

Not sure if this got lost in the shuffle because of the holidays, but I figured it was worth a bump. Still can't sort this out. TIA

0 Likes