Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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
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
Hey Victor,
thanks for checking however this code did not work for me unfortunately.
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
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
Thanks for the solution, this works exactly how i wanted it to display the header
I am glad that my solution is helpful to you.
Best regards,
GemPages Support Team
is there a way to make it only apply to the homepage
You can add transparent header in your refresh theme:
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024