Color Tint Storefront Masthead

Hey @mnatseah624. This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
?

/* Add a dark overlay */
?
.site-header:before {
    background-color: rgba(0,0,0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

The colour there is 0,0,0 or black (you can change that by looking for other rgb colour values. The 0.4 indicates the opacity.
?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Thanks Job, I’m afraid that didn’t work. But @threesons sent me another code which did it. Like this:

header#masthead::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    opacity: .5;
}

Yes, I’m learning CSS, but slowly. I’m happier with html.

Hey @mnatseah624 not sure why that didn’t work. I’ve tested it on your site and it works here. The problem with the other code is that it comes on top of your site title by the way. Just adding a z-index: -1; will fix that.

Link to image: https://cld.wthms.co/Ie04pV

Thanks, Job. OK, I get it. You’re adding the code to the parent stylesheet. (I didn’t realize you could do that to my site ?? ). I’m not there yet. I just add to the additional CSS panel.
Yes, I’m aware of the problem of it tinting out the site title. I just replied to that. Can I add that z-index thing to the additional CSS code that I got from Three Sons so it won’t tint out the title.

Don’t worry. I just solved it by combining your code with Three Sons. Like this:
header#masthead::before {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: .5; z-index: -1;
}
Works great in the Additional CSS.

Don’t know how to delete this extra post.