How to customize menu to transparent, and after scrolling it becomes blurred?

kauecadete · ‎09-24-2024

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:

Dan-From-Ryviu · ‎09-24-2024

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! Support me! 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.

View solution in original post

Sangeetanahar · ‎09-24-2024

hello @kauecadete

can you send me the Website URL

thanks

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

kauecadete · ‎09-24-2024

Hello!!!

My website url is https://7eab60-11.myshopify.com/

It is still under construction

Dan-From-Ryviu · ‎09-24-2024

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! Support me! 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.

kauecadete · ‎09-24-2024

Thank you very much!!

I'll buy you a coffe!

Dan-From-Ryviu · ‎09-24-2024

Thanks, and very welcome!

- Helpful? Like and Accept solution! Support me! 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.

How to customize menu to transparent, and after scrolling it becomes blurred?

How to customize menu to transparent, and after scrolling it becomes blurred?

Buy me a coffee

Community Blog Articles