Fixed/Sticky Nav on Debut Theme

Highlighted
Excursionist
21 0 5

Anyone know how to make my top navigation bar fixed/sticky? I want it to stay there as someone scrolls, so you can always see it. I am using the Debut theme. Thanks!

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
54 0 11

Hello Jenna.

I'm Jason, a guru here at Shopify. Yes, you can indeed fix the navigation bar on your debut theme. It does require some coding changes. Do you have any coding experience?

Prior to making any coding changes, I would recommend duplicating your theme. If you don't have previous coding experience,  I would recommend reaching out to the experts.  They can make changes to your store for a fee! 

Add to bottom of `theme.js.liquid`

```//        sticky header
$(document).ready(function() {
  //        get the header
  const myHeader = $('.site-header');
  //        set the distance from top at which to scroll
  const scrollWhen        = 10;
  //        set the class to represent a sticky state
  const stickyClass        = 'sticky';
  //        check for scrolling
  $(window).on('scroll', function() {
    //        check for height
    if (
      $(window).scrollTop() > scrollWhen &&
      !myHeader.hasClass(stickyClass)
    ) 
    {
      myHeader.addClass(stickyClass);
    } else if (
      $(window).scrollTop() <= scrollWhen &&
      myHeader.hasClass(stickyClass)
    )
    {
      myHeader.removeClass(stickyClass);    
    }
  });
});```


At top of `theme.js.liquid`

```//        need to put a margin on the top of the meta, because of the sticky header
//        search for this - ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom
//        replace with this - ScrollToFixed.defaultOptions={marginTop:/*0*/productMetaTopMargin,limit:0,bottom
const productMetaTopMargin        = 50;``` 


Add to `theme.scss.liquid`

```.header-wrapper {
  z-index: 1000;
  
  & .site-header__logo-link-for-sticky {
    display: none;
  }
}
.site-header.sticky {
  position: fixed;
  width: 100%;
  background: {{ settings.color_body_bg }};
  
  @include at-query($min, $medium) {
    padding-bottom: 20px;
  }

  .template-index & {
    & .site-nav__link,
    & span,
    & li,
    & p,
    & a {
      color: {{ settings.color_headings }} !important;
    }

    & .burger-icon {
      background: {{ settings.color_headings }} !important;
    }
  }
  .template-index & .site-header__logo-link-for-sticky {
    display: block;
  }
  .template-index & .site-header__logo-link {
    display: none;
  }
}```

Please let us know if there is anything else we can help you out with!

Jason || Shopify

Jason
1 Like
Highlighted
Excursionist
21 0 5

There is no theme.js.liquid... there is a theme.js. I used that. I followed these instructions exactly, and it did not work. The last part you didn't specify where to add it to theme.scss.liquid but I tried adding it at the beginning and at the end... neither worked.

:(

0 Likes
Highlighted
Excursionist
21 0 5

I was able to finally figure it out by searching through other threads. This is what I added (at the bottom of theme.scss.liquid, which worked). For other people out there, you just need to adjust the background color to fit your page and adjust the padding if need be.

#shopify-section-header {
  position: fixed;
  background-color: $color-body;
  width: 100%;
  z-index: 200;
}

#MainContent  {
  margin-top: 250px;
}

div#SearchDrawer {
    z-index: 101;
}

3 Likes
Highlighted
Excursionist
21 0 5

Hmmm but now on mobile, the search bar doesn't pop out properly. Anyone know a fix for this??

0 Likes
Highlighted
New Member
1 0 0

Hi Jenna, your answer was very helpful, thank you!

On the other hand, if you want to fix the issue with the nav bar you just have to give the z-index a higher value than the navigation bar to ensure it will be on top of all the content. The reason it´s not showing up is because, with the value you provided z-index:101, it shows up under the nav.-bar which is z-index:200. Should look like this:

div#SearchDrawer {
    z-index: 201;
}

z-index specifies the stack order of an element. Hope it helps!

0 Likes
Highlighted
Shopify Partner
14 0 6

Hi Jason, 

 

I mad a copy of the site I am working on (Debut theme template), followed your code instructions, and kept getting thrown errors! The suggestion by Jenna seemed to work for her and another user. I tried adding this code snippet to the bottom of  theme.scss.liquid (with both z-index suggestions) and nothing changed. :/ 

 

#shopify-section-header {
  position: fixed;
  background-color: $color-body;
  width: 100%;
  z-index: 200;
}

#MainContent  {
  margin-top: 250px;
}

div#SearchDrawer {
    z-index: 101;  // or 201; 
}

If you have any idea why this solution isn't working for me, or alternate advice, that would be great! It would be so nice to have a sticky nav in place on the website.

 

Thanks, 

Frankie 

0 Likes
Highlighted
New Member
5 0 0

There is no theme.js.liquid... there is a theme.js. and last part please mention where to add

0 Likes
Excursionist
20 1 6

I can confirm this is the solution but replace z-index: 101 with z-index: 201 as mentioned.  ALSO, if you have an image w. text overlay at top of your home page like I do, you will need to play with the margin-top: 250px.  I had to change mine to 95px.

 

 


@Jenna2 wrote:

I was able to finally figure it out by searching through other threads. This is what I added (at the bottom of theme.scss.liquid, which worked). For other people out there, you just need to adjust the background color to fit your page and adjust the padding if need be.

#shopify-section-header {
  position: fixed;
  background-color: $color-body;
  width: 100%;
  z-index: 200;
}

#MainContent  {
  margin-top: 250px;
}

div#SearchDrawer {
    z-index: 101;
}


1 Like
Highlighted
Excursionist
20 3 0

Thanks, a lot! the code still works and added it to my own website :)

0 Likes