Shopify themes, liquid, logos, and UX
Hello, I'm having trouble creating a transparent background for my header. Im using a logo image and that's it. The image is a PNG so I'm not sure as to why this is not working.
Website: www.oth3rslifestyle.com
Solved! Go to the solution
This is an accepted solution.
Hi @OTH3RS ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file -> Save
<style>
#SiteHeader{
position: absolute;
width: 100%;
background: transparent;
}
#SiteHeader .header-wrapper .header{
margin-top: 20px;
}
</style>
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Go to Themes> "..."> Edit Code> Header.liquid> Add this code above the /body tag> Save
<!--Need Help With Your Store? Contact @BIZNAZZ101 -->
{% if template == 'index' %}
<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>
Hope that solves your issue!
@biznazz101
This is an accepted solution.
Hi @OTH3RS ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file -> Save
<style>
#SiteHeader{
position: absolute;
width: 100%;
background: transparent;
}
#SiteHeader .header-wrapper .header{
margin-top: 20px;
}
</style>
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you, this worked!
Hi @OTH3RS
Try this one. This one.
hide-header header#SiteHeader {
background-color: transparent;
}
main#MainContent {
margin-top: -60px;
}
img.section-image__image.lazyautosizes.ls-is-cached.lazyloaded {
height: 100vh;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024