Personalized checkout and custom promotions with Shopify Scripts
With the new ride update my previous code to make the header transparent no longer works.
This was the previous code:
{% 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>
{% endif %}
What I want:
Current:
PLEASE HELP
Solved! Go to the solution
This is an accepted solution.
Hi @washed
You can try to use this code
<style> .header-wrapper{ background: transparent ! important; } #MainContent { margin-top: -90px; } </style> {% endif %}
Change -90px to make it fit with height of your header
- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Please use this code
{% if template == 'index' %} <style> .header-wrapper{ background: transparent ! important; } #MainContent { margin-top: -90px; } </style> {% endif %}
- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
washedclothing.com
This is an accepted solution.
Hi @washed
You can try to use this code
<style> .header-wrapper{ background: transparent ! important; } #MainContent { margin-top: -90px; } </style> {% endif %}
Change -90px to make it fit with height of your header
- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you for the response Dan, I was wondering where I should put this code, I cant wait to try it!
is there anyway to only have it as an invisible header on the homepage
because it is glitching on my other pages
This is an accepted solution.
Please use this code
{% if template == 'index' %} <style> .header-wrapper{ background: transparent ! important; } #MainContent { margin-top: -90px; } </style> {% endif %}
- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you!
Very welcome!
- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.
TikTok has rapidly emerged as a leading force in the social media landscape, rivaling p...
By Trevor Jun 12, 2024In May, we celebrated our community's amazing collaborative spirit. You asked, and t...
By JasonH Jun 6, 2024When targeting a global audience, language can pose a significant barrier, complicating...
By Trevor Jun 5, 2024