Sticky/Fixed Header and Navigation for Debut Theme

[mikeshik7]

Great!!! I was just sitting and thinking how to do this and the first discussion I find in the forum is this one :-D. Fixed option 1 and all works tip top, will launch this new version now!!

[elizsia]

This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open

theme scss liquid and paste the code at the very bottom. save and text it out

.site-nav {
position: right !important;
top: 140px !important;
z-index: 1 !important;
}

#PageContainer{
margin-left: 75px !important;
}

[elizsia]

Fixed All. Header Bar, Header and Navigation. Select Online Store > Themes, Actions > Edit Code > Assets > theme.scss.liquid Copy and paste this code at the very bottom of the page. underneath

[data-shopify-buttoncontainer] {
justify-content: flex-end;
}

< Undernearh this

www.quintessencessentials.com

@media screen and (min-width: 500px) {
   .header-bar {
     position: fixed;
     z-index: 1000;
     background: #4267B2;
     width: 100%;
     padding-bottom: 0.5rem;
     top: -2.5px;
   } 
   .main-content {
     margin-top: 25rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-header {
     position: left;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-top: 5rem;
     top: 0px;
   } 
   .main-content {
     margin-top: 5rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-nav {
     position: fixed;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-bottom: -10rem;
     top: 15px;
   } 
   .main-content {
     margin-top: 0rem!important;
   }
} 

[AkanshaSharma]

Can someone help me here since I am just one step away from getting this right ? I am using DEFAULT theme

Have fixed announcement bar and header bar but on web, announcement bar slides down after loading and goes behind header bar.

This is not happening on mobile where it’s working PERFECTLY FINE.

Site name www.urbanhippieofficial.com

What am I missing ? Using below code :-

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

}

#MainContent {
margin-top: 80px;
}

div#SearchDrawer {
z-index: 201;
}

#PageContainer {
padding-top: 80px;
}

.announcement-bar {
position: fixed;
width: 100%;
}

[tawfiqst]

This is just awesome.. Thanks for sharing

[Andre_Borges]

I was only able to make this work keeping the announcement bar.

We would like to just have the header!

Check it out please https://bemestaressencial.com

[LuisFelipe]

iquid error shopify: could not find asset snippets / cart-popup.liquid … is appearing on every page of my site … what is this? Debut theme

[xplosiv]

I gave this tutorial a try, however I was having the same issue of the bar appearing to cover up the top part of my header image.

I also had another problem when I tried this – my logo is far too large to be dragged as it would take 1/3 screen up. Is there any way to implement the sticky nav bar (without dragging the announcement bar down too) and stop the logo from it?

It would probably be best to just have the header hamburger menu, a search button, and maybe a micro logo or something.

Thank you!

[Lilas-addas]

Hello @SeanP ,

I applied the option 2 that you mentioned before for the Debut theme, and it works great, thanks!

I have a question please. Is there any way to make that works in the home page only ?

I really don’t need the header bar to be fixed in all of my rest pages.

A help would be very appreciated.

My website URL: https://presets-market.com

[afsiragusa]

Hi Sean,

I’ve done your option 1 for sticky header in Debut theme with announcement bar enabled. It seems to be the only thing on here that works.

My issue is this though: When the page is loading (when you first get to the page), it’s almost like the whole page if shifted up under the header a tiny bit, and then once the page officially is loaded, it pops back down to how It should be. There’s some sort of lag/glitch.

Has anyone experienced this? It just looks bad for a customer visits the site. I would really prefer to have the sticky header/announcement bar, but I hate the way this is happening. I can’t find anything to fix it.

Thanks!

[afsiragusa]

@SeanP message above. Thanks!

[oscprofessional]

Hello @afsiragusa ,

Please share your site url so that I will give you exact solution

[afsiragusa]

@oscprofessional

spray-away-toilet-brush.myshopify.com

But it’s not live yet…that won’t give you access will it?

[oscprofessional]

@afsiragusa ,

Please share password

[afsiragusa]

@Osc

How’s that work? U get full access to my account?

[afsiragusa]

@oscprofessional

[glabs]

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.

[aorlin]

this is tutorial work, thanks, bro! Aorlin.com

[User123]

Yes, I have that same issue,

Does someone have a solution?

[unitech456]

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;
}
}