Sticky/Fixed Header and Navigation for Debut Theme

Highlighted
New Member
2 0 2

Change the number 80 to 107. The number 107 made it stop doing what you described in my situation. Maybe try playing around with that number until it stops

This is the line of code you need to edit as you can see instead of 80px i changed it to 107px

#PageContainer {
padding-top: 107px;
}

 

View my reply above for further clarification 

Highlighted
New Member
2 0 1

Unfortunately it didn't work out, but thanks anyway!

Highlighted
Tourist
4 0 1

Hi there, I followed all the instructions in your post, but just got a white space between the header and the slideshow (first thing under the header). The header/announcement does not follow me when I scroll down either. 

 

My website is www.immigenshop.com 

 

Thanks!

 

Edit: Solved!

0 Likes
Highlighted
New Member
2 0 0

Hi Sean,

 

Excellent work, thank you!

 So I was stoked using option 1 that it worked on both desktop and mobile.

BUT but on mobile, the scroll-down menu that resides in the header does not function as desired: after scrolling down the site, sticky header all perfectly in place, I clicked the menu... but the menu list does not appear... so I thought maybe the menu got "left behind" at the top. So I tested by scrolling back to the top and click Menu button, the menu then worked perfectly just like before I implemented the code.... So, is there more code I have to look at to add for my case? 

 

By the way, I am using a premium theme, not the debut theme

 

Thanks once again for the excellent code snippets!

 

0 Likes
Highlighted
New Member
2 0 0

By the way, I am using a premium theme, not the debut etc

Thanks

0 Likes
Highlighted
Tourist
13 0 1

Thanks for this amazing and helpful tutorial about Fixing header and Navigation for Debut Theme. I also face that problem but due to your tutorial, i solve that problem and my store is running properly. Again Thanks.

0 Likes
Highlighted
New Member
1 0 0

And for the all code works only on mobile? I have a debut theme.

0 Likes
Highlighted
New Member
2 0 0

Hi SeanP this is really helpful.  However, I am wondering if it is possible to fix the nav bar except for checkout.  I find it inconvenient to see the nav bar while making payment

0 Likes
Highlighted
Tourist
14 0 1

Hello!!! 

 

That's really nice. I have a little issue with it. My breadcrumbs are not appearing after the implementation of the code. Here's how I have them coded:

 

code1.png

 

Do you know what can I do to fix it?

0 Likes
Highlighted
Tourist
7 0 3

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

$(window).scroll(function() {
scroll = $(window).scrollTop();
if (scroll >= 1) {
$('.site-header').css('top', '0');
} else {
$('.site-header').css('top', 'initial');
}
});