Sticky/Fixed Header and Navigation for Debut Theme

New Member
7 0 0

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!!

0 Likes
Tourist
29 0 1

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

0 Likes
Tourist
29 0 1

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

 

0 Likes
New Member
3 0 0

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

0 Likes
Tourist
4 0 0

This is just awesome.. Thanks for sharing

0 Likes
Highlighted
New Member
1 0 0

Nice post,
Our service can provide your home or property with the well to match, so you can sure that it’s suitable for the needs of your home. Our professional Pump Service  is the best way to make sure that your home has all that you need.

0 Likes