Fixed Header

New Member
6 0 0

Hi, I'm new in shopify and now I having some isues to customise my store.

I'm want one fixed header like this website: https://www.nuuvem.com/

Someone now how to do this?

 

0 Likes
New Member
6 0 0

I'm using the Debut Theme

fyi

0 Likes
Shopify Expert
650 0 93

Try adding the following CSS to the bottom of your assets/theme.scss.liquid file
 

header.site-header {
    position: fixed;
    z-index: 999999;
}

 

2 Likes
New Member
6 0 0

Thx!!! :D

0 Likes
New Member
1 0 0

I am new to Shopify and Liquid but the answer given above is not adequate. Yes it fixes the header position but it makes it transparent on a Z layer and other page and section content is positioned and flows under the header and nav bar. How to I fix the header and position page and section content below the header so only the content scroll and only under the header content?

0 Likes
Tourist
15 0 2

Hey Carl!

We recently implemented a sticky nav bar on the Debut theme that will auto-hide on scroll down and re-appear on scroll up. It's really simple, and we hope it will be helpful to some of you!

Instructions here.

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
Tourist
29 0 1
@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;
   }
}

www.quintessencessentials.com

0 Likes