How to make header and header border in mobile view transparent - debutify theme

Jammy_Boy
Tourist
13 1 1

I tried to use this code but the header border is not transparent.I also want the header to be a stick header but this code makes it not sticky. Site link https://testingstore3-levo-plant.myshopify.com/?_ab=0&_fd=0&_sc=1&key=13c8aa585847df77bbf8517f3d71a7...

 

a@media screen and (max-width: 800px) {
  #shopify-section-header {
    position: absolute;
    z-index: 100000;
    width: 100%;
  }
  header.site-header {
    background-color: transparent!important;
  }
}
.template-index #shopify-section-header{
margin-bottom: -60px;
position: relative;
z-index: 9;
}
.template-index #shopify-section-header header{
background-color: transparent;
}

 

Screenshot (189).png

0 Likes
HardikDavra
Shopify Partner
2311 361 994

@Jammy_Boy 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

 

 

.template-index #shopify-section-header {
position: -webkit-sticky;
position: sticky;
}
@media screen and (max-width: 769px) {
.site-header {
    border-color: unset;
}
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Jammy_Boy
Tourist
13 1 1

@HardikDavra I used your code and it made it black so I modified it to make it transparent,but I want the header to turn white when I start scrolling,and be only transparent when its at the top of the page.

Screenshot (191).pngScreenshot (192).png

 

 

.template-index #shopify-section-header {
position: -webkit-sticky;
position: sticky;
}
@media screen and (max-width: 769px) {
.site-header {
    border-color: transparent ;
}
}

 

I modified border-color:transparent so,now how would I make the header only transparent at the top of the slideshow and white when scrolling or anywhere else on the page?

 

How would I modify this code?

@media screen and (max-width: 800px) {
  #shopify-section-header {
    position: absolute;
    z-index: 100000;
    width: 100%;
  }
  header.site-header {
    background-color: transparent!important;
  }
}
.template-index #shopify-section-header{
margin-bottom: -60px;
position: relative;
z-index: 9;
}
.template-index #shopify-section-header header{
background-color: transparent;
}
0 Likes