Transparent dropdown menu on home page only

Solved

Transparent dropdown menu on home page only

vfp1
Tourist
17 0 1

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

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

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.

View solution in original post

Replies 4 (4)

zack_dev
Shopify Partner
92 15 15

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
Shopify Partner
10868 2143 2277

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.

vfp1
Tourist
17 0 1

Thank you so much! This worked perfectly!!

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

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.