Conditional color change for header on mobile

Solved
eloiseuw
Tourist
9 0 8

Hello all,

Would so appreciate anyone's help as this is the last little tweak needed on my website!

On mobile, my website's homepage header is transparent and overlays the hero image. Also, the page background is white. This means that when my dropdown menu appears and pushes the hero image down, the white text and icons in the header are not visible against the white background. I've successfully tweaked the css to make the dropdown menu background black, but would like to apply this to the header too ONLY when the menu drops down. 

Any ideas?

Please see images for a better explanation. 

Thanks a million!

WhatsApp Image 2021-01-27 at 16.48.36.jpeg

WhatsApp Image 2021-01-27 at 16.48.36 (1).jpeg

 

KetanKumar
Shopify Partner
14323 1665 5154

@eloiseuw 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

Hi Ketan,

Thank you so much!

I'll send you url and password by direct message.

KetanKumar
Shopify Partner
14323 1665 5154

@eloiseuw 

great, thanks for message i will review and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
14323 1665 5154

This is an accepted solution.

@eloiseuw 

Thanks for all details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
.template-index .site-header {background: #000;} /* change value as you like */
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

@KetanKumar thank you sooooo much! Worked perfectly  

KetanKumar
Shopify Partner
14323 1665 5154

@eloiseuw 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes