Sticky/Fixed Header and Navigation for Debut Theme

Hello @cmineart 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
1 0 0

Many thanks!

0 Likes
New Member
1 0 0

Worked perfectly! thank you!

0 Likes
Tourist
32 0 1

Hi guys,

Any reason why the header isn't sticky on desktop?

Also on mobile, it looks like the header isn't pushing down the rest of the page beneath it –– more so just cutting it off. How do we fix that?

https://sounds-of-crenshaw.myshopify.com/

Password is aoffaw

0 Likes
Tourist
17 0 1

great code ty

0 Likes
Tourist
17 0 1

I was editting hover menu code and somehow cant get the white space from announcement bar to not hover like before when entering this code- can someone assist? The code in this thread worked perfect before i editted how to hover to open header menu code

 

0 Likes
Tourist
4 0 1

I want to make the header menu of my website stick to the top of the page when scrolling past it, but NOT the announcement bar above it. So that when you scroll, it first scrolls down normally until the announcement bar is not visible anymore, and then the header sticks to the top of page after scroll.

I am using the Debut theme.

I have read this thread: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td..., applied both versions and they work. However in Version 2, instead of behaving like I described above, the announcement bar scrolls and the header is sticky, but not to the top of the viewport. It just stays sticky where it is on first load, hence after scrolling there is space above it in which you can also see the website scrolling underneath.

I have applied the code from Option 2 above in  theme.css.liquid and in theme.js, and then started playing around with it to get that offset effect, using this tutorial: http://jsfiddle.net/gxRC9/502/

The fiddle example above is EXACTLY what I am trying to achieve: scroll until header reaches top of page, then fix it to make it sticky. (with everything above it on initial load scrolling away outside of viewport)

Now I have this code in theme.css.liquid:

 

 

 

/*Sticky header*/
#SearchDrawer {
  z-index:1001;
}

.site-header {
  -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 }};
}

.fixed {
  position: fixed;
  z-index:1000;
  left:0;
  top:0;
}

#PageContainer {
  padding-top: 80px;
}

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

 

 

 

(i know i dont need the page container stuff right now, most importantly I separated the .site-header css edit (for a nice dropshadow) from the .fixed class, which is what I want to only appear after the offset scroll as described in JS below)

 

and this code in theme.js

 

 

 

var stickyOffset = $('.site-header').offset().top;

$(window).scroll(function(){
  var header = $('.site-header'),
      scroll = $(window).scrollTop();
    
  if (scroll >= stickyOffset) header.addClass('fixed');
  else sticky.removeClass('fixed');
});

 

 

 

Where its setting a variable for the offset distance of siteheader from the top and then telling it to apply my .fixed class from above CSS once the scroll point went past that level.

But, its not working...

I am guessing its either something to do with measuring/setting the offset distance or with Jquery in the theme.

(FYI: what I dont want to do is work with fixed "px" values in the offset. I want to keep it dynamic. FYI #2: I want this to happen on both desktop & mobile).

 

Would love if somebody could help me find my thinking error !! Thanks guys

Tourist
34 0 2

Hi All/@SeanP ,

Is it possible to have a sticky/fixed header for when the logo is centered please?

Thanks in advance

0 Likes
Tourist
5 0 1

Brilliant! Thanks for a clear and easy to follow solution!

0 Likes
Tourist
3 0 0

Hi I am experiencing the same issue, except my header takes up a portion of my website and it does not return to normal. Part of my site is behind my header and I am unable to scroll up to the missing portion.

Hi @glabs , I have this same problem! Were you ever able to find a solution for it?

0 Likes