Re: Header

dboutique · ‎10-10-2024

Hey everyone! I need some help.

I have a transparent menu that stays at the top when scrolling down, and when scrolling up, a menu with a white background appears. I want the logo in the transparent menu to be white, while in the menu with the white background, everything stays the way it is now. Is it possible to implement this?

Thanks!

link on my site: https://dboutique.shop/

Dan-From-Ryviu · ‎10-10-2024

Hi @dboutique

Please remove customized code you added to make a transparent menu and change option Sticky header in Online Store > Themes > Customize > Header then I can provide code to do your request

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

dboutique · ‎10-10-2024

I did it

Dan-From-Ryviu · ‎10-10-2024

Still have code you added in base.css file

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

dboutique · ‎10-10-2024

Did it

Dan-From-Ryviu · ‎10-10-2024

Please add this code to theme.liquid file, after <head>

{% if template == 'index' %}
<style>
.section-header .header__icon span,
.section-header .header__menu-item span,
.section-header .list-menu__item { color: #fff; }
.section-header .header-wrapper { background: transparent; }
.header-wrapper .header__heading-logo { filter: invert(1); }
.scrolled-past-header .header-wrapper { background: #fff; }
.scrolled-past-header .header-wrapper .header__heading-logo { filter: invert(0); }
#MainContent { margin-top: -108px; }
body .scrolled-past-header.section-header .header__icon span,
body .scrolled-past-header.section-header .header__menu-item span,
body .scrolled-past-header.section-header .list-menu__item { color: #121212; }
@media (max-width: 749px) {
body #MainContent { margin-top: -82px; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

dboutique · ‎10-10-2024

The code works, but now the hamburger menu items in the mobile version of the transparent header are white.

dboutique · ‎10-10-2024

And before that, my menu was hidden when scrolling down, but now it is not hidden

Dan-From-Ryviu · ‎10-10-2024

If you want the header hidden when scrolling down, please change Header > Sticky header > On scroll up.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Header

Header

Community Blog Articles