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.

@Wedge Sorry, I made a mistake. Change color to background [Screen Shot 2020-04-24 at 8.51.16 AM.png]

@Wedge Yes, that’s possible. What’s your store URL?

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

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

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

Sorry yes the password is Hudson

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

Store Design

Wedge April 24, 2020, 1:04am 9

Still nothing

Topic		Replies	Views
How to create transparent header Store Design header	8	82	September 11, 2024
Transparent header on mobile format, third party theme Thèmes Shopify design , css	0	17	December 28, 2024
Mobile Header transparent (only on home page) , when scrolled it should be white Store Design menu , design , header , customizations , landing-page , css , third-party-themes , shopify-themes , troubleshooting , html	2	27	October 29, 2024
Transparent Header on theme Store Design design , customizations	9	140	August 21, 2025
Header is transparent in when I am on desktop but is white on mobile Store Design header	3	49	October 1, 2023

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

Related topics