Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.

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

Solved

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

kauecadete
Tourist
4 0 1

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

 

kauecadete_0-1727227775086.png

depois de rolar:

kauecadete_1-1727227793510.png

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10087 2006 2057

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.

View solution in original post

Replies 5 (5)

Sangeetanahar
Trailblazer
556 36 66

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
Tourist
4 0 1

Hello!!! 

 

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

 

It is still under construction

Dan-From-Ryviu
Shopify Partner
10087 2006 2057

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.

kauecadete
Tourist
4 0 1

Thank you very much!!

 

I'll buy you a coffe!

Dan-From-Ryviu
Shopify Partner
10087 2006 2057

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.