Re: Transparent dropdown menu on home page only

vfp1 · ‎04-10-2024

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;
}

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

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

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

zack_dev · ‎04-10-2024

make sure to include .template_index class on css code so it applies only to homepage .

- Helpful? Like or Accept solution, - Buy me Coffee ☕

-

Contact me

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

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

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

vfp1 · ‎04-11-2024

Thank you so much! This worked perfectly!!

Dan-From-Ryviu · ‎04-11-2024

Happy I could help!

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Re: Transparent dropdown menu on home page only

Transparent dropdown menu on home page only

Contact me

Community Blog Articles