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

Solved

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

InMotionSport
Tourist
6 0 1

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

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1252

This is an 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

GemPages_0-1678244861751.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1786 3110

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
Tourist
6 0 1

Hey Victor, 

 

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

 

GemPages
Shopify Partner
5625 1262 1252

This is an 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

GemPages_0-1678244861751.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
InMotionSport
Tourist
6 0 1

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

GemPages
Shopify Partner
5625 1262 1252

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
konnnn
Visitor
1 0 0

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

 

MRamzan
Shopify Partner
339 3 35

You can add transparent header in your refresh theme:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112