Sticky/Fixed Header and Navigation for Debut Theme

Highlighted
Tourist
9 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
Highlighted
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
Highlighted
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
Highlighted
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
Highlighted
Tourist
6 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
Highlighted

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 

0 Likes
Highlighted
New Member
4 0 0

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

0 Likes
Highlighted
Tourist
7 0 1

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! 

 

0 Likes
Excursionist
32 0 6

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

 

 

2 Likes