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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Header

Header

Community Blog Articles