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
7720 1502 1505

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

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 4 (4)

zack_dev
Shopify Partner
75 14 10

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
7720 1502 1505

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

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- 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
7720 1502 1505

Happy I could help!

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now