Shopify themes, liquid, logos, and UX
Would like to have a transparent header, which is fixed in a banner when scrolling.
Heres my shop with the link: https://tyyhbpyu5glzzb4f-77703315800.shopifypreview.com
Thanks for your help!
Hello @byrdsvintage
Its Artzen Technologies! We will be happy to help you today.
You can try to follow these steps:
Go to Online Store -> Themes -> Actions -> Edit code.
Go Assets folder -> theme.liquid file.
Add the following code in the bottom of the file above </body> tag
<style>
.shopify-section-header-sticky sticky-header {
position: fixed;
width: 100%;
background: transparent;
}
</style>
Let me know if need further assistance
Regards,
Artzen Technologies
It worked the other way around. I want the header at the beginning of the page transparent and when scrolling down fixed in a non-transparent header.
Use this code instead of first :-
<style>
sticky-header.header-wrapper.gradient.header-wrapper--border-bottom {
position: fixed;
width: 100%;
background: #f7f5f5;
}
.shopify-section-header-sticky sticky-header {
background: transparent;
}
</style>
Still didnt work. The header at the beginning of the page is not transparent...
Add this
<style>
sticky-header.header-wrapper.color-scheme-4971f8df-ac1a-4bc8-87a3-5f9144a6de68.gradient.header-wrapper--border-bottom {
position: fixed;
width: 100%;
background: transparent;
}
.shopify-section-header-sticky sticky-header {
background: #f7f5f5!important;
}
</style>
@byrdsvintage if this solution helpful for you then please accept it
Now it is like i want it but unfortunately there are two little things that needed to be changed:
1. There is a line under the header. I want to remove it
2. You cannot see the full page, because the header covers it. So there need to be some distance between header and the product page added.
You can see it here very well:
Try this one.
.section-template--20558264566104__product-grid-padding .facets-vertical.page-width {
padding-top: 100px;
}
section#shopify-section-template--20558264959320__main {
padding-top: 100px;
}
Please, Dont forget to Mark Solution the post that helped you. Thanks!
Can you send me the full CSS for the following link, because its not working..
Link:
https://mw3hpqj9i702j2eo-77703315800.shopifypreview.com
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025