Shopify themes, liquid, logos, and UX
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/
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.
I did it
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.
Did it
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.
The code works, but now the hamburger menu items in the mobile version of the transparent header are white.
And before that, my menu was hidden when scrolling down, but now it is not hidden
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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024