Shopify themes, liquid, logos, and UX
Hi everyone,
I'm looking for some assistance in making the dropdown menu on my website transparent with white lettering on my desktop home page only.
I was able to achieve the effect using the attached code, but it changes the menu so that it can't be seen on other product pages.
Thank you in advance for any input!
details[open] > .header__submenu {
background-color: transparent !important;
border: none !important;
}
.header-wrapper * {
color: white !important;
}
Solved! Go to the solution
This is an accepted solution.
Hi @vfp1
You can add this code to your theme.liquid file, after <head> to make it work on desktop homepage only
{% if template == 'index' %}
<style>
@media (min-width: 990px) {
details[open] > .header__submenu {
background-color: transparent !important;
border: none !important;
}
.header-wrapper * {
color: white !important;
}
}
</style>
{% endif %}
Best Regards,
Dan from Ryviu
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.
make sure to include .template_index class on css code so it applies only to homepage .
This is an accepted solution.
Hi @vfp1
You can add this code to your theme.liquid file, after <head> to make it work on desktop homepage only
{% if template == 'index' %}
<style>
@media (min-width: 990px) {
details[open] > .header__submenu {
background-color: transparent !important;
border: none !important;
}
.header-wrapper * {
color: white !important;
}
}
</style>
{% endif %}
Best Regards,
Dan from Ryviu
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.
Thank you so much! This worked perfectly!!
Happy I could help!
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025