Transparent header on desktop and ipad, solid header on mobile

Hi, 

I am using this code below to create a semi-transparent header on scroll.

Now, my client wants a solid black header to show on mobile view only, with the semi-transparent header showing on desktop and iPad.  

The code I'm using: 

#header {
background: rgba(0,0,0,0.5);
}

Link: https://rhubarb-apricots-m3lb.squarespace.com/

Password: Hazel

Thank you for your help! 

Poppy

Hi Poppy, here is a code snippet to show solid black header only on mobile:

@media only screen and (max-width: 767px) {
	#header {
		background: rgba(0,0,0,1) !important;
	}
}

I think the code should be

@media only screen and (max-width: 767px) {
    .header-border, header#header {
        background-color: rgba(0,0,0,0.2) !important
    }
}

5 minutes ago, tuanphan said:

I think the code should be

@media only screen and (max-width: 767px) {
    .header-border, header#header {
        background-color: rgba(0,0,0,0.2) !important
    }
}

 

@tuanphan Post mentioned to create solid black background color on mobile view. Your solution will turn the background transparent.