Make header transparent and solid on scroll

Make header transparent and solid on scroll

Andia
Tourist
61 0 2

Andia_0-1718706013963.png

 

how can i make the background transparent but solid when i start scrolling?

 

www.andiacollective.com.au

Replies 9 (9)

techlyser_web
Shopify Partner
1777 330 357

Hello @Andia 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.gradient {
background: transparent !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andia
Tourist
61 0 2

Andia_0-1718706953213.png

 

 

there is an overlap now

techlyser_web
Shopify Partner
1777 330 357

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

.header {
   padding-top: 40px !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Andia
Tourist
61 0 2

Andia_0-1718708767313.png

 

 

when i scroll i dont want this extra space. is there a way to get rid of it?

techlyser_web
Shopify Partner
1777 330 357

techlyser_web_0-1718709514854.png

It look fine 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Rahul_dhiman
Shopify Expert
212 40 38

Hello @Andia 
Go to online store ---------> themes --------------> actions ------> edit code-------> base.css --- add at the very end of the file.

@media screen and (min-width: 990px) {
    .header {
        padding-top: 30px;
    }
}


adn the result will be
fg.png

let me know if this solved your purpose.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Andia
Tourist
61 0 2

this didnt seem to work! still overlaps

Andia
Tourist
61 0 2

<style>
sticky-header.header-wrapper {
background: transparent;
position: fixed;
top: 0;
left: 0;
right: 0
}

</style>
<style>

.scrolled-past-header * {
background: #F2F3EE !important;
}

 

 

this is the code i used so that the header is transparent and then goes solid when scrolled

Rahul_dhiman
Shopify Expert
212 40 38

Please check the screenshot
oi.png

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here