Debut theme - Fix padding issue caused by sticky header

Solved
Highlighted
Explorer
89 0 20

Hi everyone,

So I followed a common tutorial for a sticky header (https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td...). It says it's recommended with left logo alignment, but I really wanted center alignment so I did, and I had to choose the second option of sticky without announcement bar in that tutorial.

The problem is that is creates a weird padding issue on my page load. It only pushes the page down after a few seconds. Also, when already on a page, and clicking an anchor link to that same page, it doesn't land exactly where it should. 

I made a little video to show the issue in detail: https://youtu.be/j6saPCx1f0Q

My URL is lokalebloemetjes.myshopify.com

Theme: Debut

theme.scss.liquid customizations: 

// Sticky header (other part in theme.js)
#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: white;
  @include transition(all 0.3s);
}

#PageContainer {
  padding-top: 80px;
}

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

// Make only site nav sticky (other part in theme.js)
.header-fixed {
  	@include media-query($medium-up) {
 	@include transform(translateY(-130px));
}
}

 

Theme.js customizations:

// Sticky header (other part in theme.scss)
function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

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

// Make only part of header sticky (other part in theme.scss)
$(window).scroll(function(){
      if ($(this).scrollTop() > 230) {
          $('#shopify-section-header').addClass('header-fixed');
      } else {
          $('#shopify-section-header').removeClass('header-fixed');
      }
});

 

I would really appreciate any help, thanks!

0 Likes
Highlighted
Shopify Partner
1632 358 484

This is an accepted solution.

HI @augds 

 Please try this 

 

@media screen and (min-width: 768px) {
#PageContainer {
  padding-top: 214px;
}
}

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Explorer
89 0 20

Thank you, that worked perfectly on desktop! However, I'm still getting the same issue on mobile. I would just remove the 

@media screen and (min-width: 768px)

 but I don't know how you figured out the height of the adjustment and what it would be for mobile. 

It does the same loading thing there, and also when you click the hamburger menu, it pulls up the content, then stays there when you close the menu. 

Any advice? @dmwwebartisan 

0 Likes
Highlighted
Shopify Partner
1632 358 484

Hello, @augds 

Solution for mobile please try this 

add code assets/theme.scss.liquid bottom of the file

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

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
New Member
2 0 0

What code did you use in the end your site to fix this issue as I am currently having this issue

0 Likes
Highlighted
Explorer
89 0 20

@jkmdawg  Within the sticky header code, change the px in this

 

#PageContainer {
  padding-top: 80px;
}

 

to whatever fits. For me thats 200px

0 Likes