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.
Yes, that’s possible. What’s your store URL?
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;
}
}
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.
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;
}
}
Ok it’s half working for some reason the burger icon is staying white but only on the home page.
Add this
.header-wrapper.header-wrapper--transparent .burger-icon {
@media only screen and (max-width: 590px) {
color: #000 !important;
}
}
Still nothing
@Wedge
Your store is password protected now. I can’t get access to the code
Sorry yes the password is Hudson
Sorry, I made a mistake.
Change color to background
1 Like
Woooo! it’s perfect thank you for all your help.
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.
How can this be done for the Crave version 3.0.0 theme, could you please help me
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?