Transparent Sticky header on scroll up only

Transparent Sticky header on scroll up only

Drews1k
Tourist
14 0 2

Hey guys! 
I need help, i made my header transparent on my home page and i want it to sticky on scroll up, when i put "on scroll up" settings it becomes sticky always!

Replies 7 (7)

devmont-digital
Shopify Partner
132 31 34

Hi @Drews1k,

 

If you want to create a transparent sticky header on scroll, follow these steps:

  1. Go to Online Store -> Themes -> Edit Code
  2. Search for the file base.css
  3. Paste the code at the bottom of the file

 

.scrolled-past-header .header-wrapper{
  background-color: transparent !important;
}

 

Note: This scenario works only with the Dawn theme.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
Drews1k
Tourist
14 0 2

Doesn't work for me, i'm using Sense theme, maybe i can share my url with you and you can check it? I need sticky header "on scroll on" on my home page

devmont-digital
Shopify Partner
132 31 34

Please share the URL of the website.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
Drews1k
Tourist
14 0 2
devmont-digital
Shopify Partner
132 31 34

If your sense theme here follows the steps above:

  1. Go to Online Store -> Themes -> Customize.
  2. Go to Header, find the Sticky Header option, select "Always," reduce the logo size, and save.

Untitled.png3. Go to Online Store -> Themes -> Edit Code.

4. Search for the file base.css.

5. Paste the code at the bottom of the file.

 

 

.scrolled-past-header .header-wrapper{
  background-color: transparent !important;
}​

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
Drews1k
Tourist
14 0 2

Can you also help me with transparent header and announcement bat? 

devmont-digital
Shopify Partner
132 31 34

Sure, for further assistance, please reach out to us at info@devmontdigital.io.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io