Sticky/Fixed Header and Navigation for Debut Theme

New Member
2 0 2

At the bottom part of the code that goes into the theme.css.liquid there is the line of code called #page container {padding-top:80px;

The number 80 is what needs to be changed. For my case I changed the number 80 to 107. Let me know if that works

#SearchDrawer {  z-index:1001;
}

#shopify-section-header {  position: fixed;  z-index:1000;  left:0;  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);  background-color: {{ settings.color_body_bg }};
}

#PageContainer {  padding-top: 80px; }

@media screen and (max-width: 749px) {
#PageContainer {  padding-top: 70px;
}
}

 

1 Like
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 

1 Like
New Member
2 0 1

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

1 Like
New Member
4 0 0

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

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

Thanks

0 Likes