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:
Hey 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-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024