How can I create a transparent header on the Refresh Theme?

[InMotionSport]

I'm using refresh theme and have searched the forum here to make my header transparent so it basically is a part of the image below it and then when you scroll down it turns to black or white.

Example nalenayurveda.com

thanks a bunch

[PageFly-Victor]

Hi @InMotionSport 

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

 <style>
      .header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
  background-color: transparent;
  }

  .header__menu-item, .header__active-menu-item, .header__icon .icon {
      color:#fff
  }
  .header__menu-item:hover{
      color:#fff;
  }
  </style>

    <script>

const pfInterval = setInterval(()=>{
  var sticky = document.querySelector('.header-wrapper'); 

if (sticky) {
clearInterval(pfInterval)
  window.onscroll = function(){
if(window.scrollY > 0) { 
 sticky.style.background = 'black'; 
} else {
 sticky.style.background = 'transparent'; 
}
}
}
},100)
setTimeout(() => {
clearInterval(pfInterval)
},15000)
      
    </script>

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[InMotionSport]

Hey Victor, 

thanks for checking however this code did not work for me unfortunately.

[GemPages · Accepted solution]

Hello @InMotionSport ,

It's the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.shopify-section-header-sticky sticky-header.header-wrapper {
    background: transparent !important;
    position: fixed !important;
    width: 100% !important;
}
.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper{
    background: var(--gradient-background) !important;
    top: 0;
}
</style>

Let us know how it works for you.

Best regards,
GemPages Support Team

[InMotionSport]

Thanks for the solution, this works exactly how i wanted it to display the header

[GemPages]

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

[konnnn]

is there a way to make it only apply to the homepage

[MRamzan]

You can add transparent header in your refresh theme: