Shopify themes, liquid, logos, and UX
Hello!
I'm using the DAWN theme.
I would like to know how to make the menu transparent, so that it appears above the banner.
And after I scroll down the page, I want it to be blurred with color, so it doesn't disappear into the page.
SITE EXAMPLE: WWW.INSIDERSTORE.COM.BR
depois de rolar:
Solved! Go to the solution
This is an accepted solution.
Hi @kauecadete
Please add this code to theme.liquid file, after <head> in Sale channels > Online Store > Themes > Edit code
{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item,
.section-header .header-wrapper .list-menu__item {
color: #fff;
}
.header__heading-logo { filter: invert(1); }
.section-header.scrolled-past-header .header__heading-logo { filter: invert(0); }
#MainContent { margin-top: -101px; }
body .section-header.scrolled-past-header .header-wrapper .header__icons *,
body .section-header.scrolled-past-header .header-wrapper summary.list-menu__item,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item {
color: inherit;
}
@media (max-width: 749px) {
body #MainContent { margin-top: -93px; }
}
</style>
{% endif %}
<style>
body .section-header.scrolled-past-header .header-wrapper { background: #ffffffc9; }
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
hello @kauecadete
can you send me the Website URL
thanks
This is an accepted solution.
Hi @kauecadete
Please add this code to theme.liquid file, after <head> in Sale channels > Online Store > Themes > Edit code
{% if template == 'index' %}
<style>
.section-header .header-wrapper { background: transparent; }
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item,
.section-header .header-wrapper .list-menu__item {
color: #fff;
}
.header__heading-logo { filter: invert(1); }
.section-header.scrolled-past-header .header__heading-logo { filter: invert(0); }
#MainContent { margin-top: -101px; }
body .section-header.scrolled-past-header .header-wrapper .header__icons *,
body .section-header.scrolled-past-header .header-wrapper summary.list-menu__item,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item {
color: inherit;
}
@media (max-width: 749px) {
body #MainContent { margin-top: -93px; }
}
</style>
{% endif %}
<style>
body .section-header.scrolled-past-header .header-wrapper { background: #ffffffc9; }
</style>
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you very much!!
I'll buy you a coffe!
Thanks, and very welcome!
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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