Transparent header

katbuddies · ‎09-24-2024

Hello guys!
This is my new shop: https://katbuddies.shop/

My question is could i make my header color text white when header is transparent and when is not transparent black text withwhite background?

This shop did like that : https://thewoofsupply.com/

Thank You !

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

Hi @katbuddies

You can do that by adding this code to theme.liquid file, after <head> in Online store > Themes > Edit code

{% if template == 'index' %}
<style>
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item, 
.section-header .header-wrapper summary svg,
.section-header .header-wrapper .list-menu__item span {
color: #fff !important;
}
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 summary svg,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item span {
color: inherit !important;
}
</style>
{% endif %}

Results:

- 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

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

Code update

{% if template == 'index' %}
<style>
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item, 
.section-header .header-wrapper summary svg,
.section-header .header-wrapper .list-menu__item span {
color: #fff !important;
}
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
body .section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: invert(0); }
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 summary svg,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item span {
color: inherit !important;
}
</style>
{% endif %}

- 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

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

Hi @katbuddies

You can do that by adding this code to theme.liquid file, after <head> in Online store > Themes > Edit code

{% if template == 'index' %}
<style>
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item, 
.section-header .header-wrapper summary svg,
.section-header .header-wrapper .list-menu__item span {
color: #fff !important;
}
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 summary svg,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item span {
color: inherit !important;
}
</style>
{% endif %}

Results:

- 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.

katbuddies · ‎09-25-2024

it worked ! thank you so much 🙂

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

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.

katbuddies · ‎09-25-2024

Hey, what code can i use to make also my logo white/black?

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

Code update

{% if template == 'index' %}
<style>
.section-header .header-wrapper .header__icons *,
.section-header .header-wrapper summary.list-menu__item, 
.section-header .header-wrapper summary svg,
.section-header .header-wrapper .list-menu__item span {
color: #fff !important;
}
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
body .section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: invert(0); }
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 summary svg,
body .section-header.scrolled-past-header .header-wrapper .list-menu__item span {
color: inherit !important;
}
</style>
{% endif %}

- 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.

katbuddies · ‎09-25-2024

You are the BEST !! Thank you

Transparent header

Transparent header

Community Blog Articles