Can you have a transparent web header and solid mobile background?

[Wedge]

Is it possible to have a transparent header for web view and solid colour background for mobile? Reason is, in mobile it moves my logo and gets lost in the image.

[Denis_A]

@Wedge 

Yes, that's possible. What's your store URL?

[Wedge]

wedgedogcollection.com

---

[Denis_A]

@Wedge 

Add this piece of code at the bottom of your theme.scss file:

.header-wrapper {
  @media only screen and (max-width: 590px) {
     position: relative !important;
  }
}
.site-header {
  @media only screen and (max-width: 590px) {
     background-color: rgba(66, 66, 66, 0.89) !important;
  }
}

[Wedge]

Thank you Denis, that worked great. Is there any way to make the header white and the menu black just for mobile? If no the grey box works too.

[Denis_A]

You are welcome.
Just change rgba(66, 66, 66, 0.89)  to #fff

And add this code

.header-wrapper.header-wrapper--transparent .burger-icon, .icon-cart {
  @media only screen and (max-width: 590px) {
     color: #000 !important;
  }
}

[Wedge]

Ok it's half working for some reason the burger icon is staying white but only on the home page.

[Denis_A]

Add this

.header-wrapper.header-wrapper--transparent .burger-icon {
  @media only screen and (max-width: 590px) {
     color: #000 !important;
  }
}

[Wedge]

Still nothing

[Denis_A]

@Wedge 
Your store is password protected now. I can't get access to the code

[Wedge]

Sorry yes the password is Hudson

[Denis_A · Accepted solution]

@Wedge 

Sorry, I made a mistake.
Change color to background

[Wedge]

Woooo! it's perfect thank you for all your help.

[RFS]

How can this be done for the Crave version 3.0.0 theme, could you please help me 

[made4Uo]

Hi, 

For people who wants to spare the headaches on adding a transparent header, check the video below. This works with scrolling down. No app being use, just a few lines of code. No crazy javascript code. 

[Traxx-Committee]

Hey how can I control the transparency for my header? I don't want header all the way transparent. I just want to change it to maybe 80 or 75% opacity?