Change header BG colour Unity theme

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

Alternatively use your Child Theme style.css file to hold your CSS modifications:

#masthead {
    position: static;
}

#masthead,
#masthead:before {
    background: blue;
}

#masthead:before {
    content: "";
    height: 154px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media screen and (min-width: 800px) {

    #masthead:before {
        height: 114px;
    }

}

Hello Andrew

Your code works perfect, thank you very much ??

There is only 1 problem. In responsive (mobile device) mode there are still white borders around my header. Is there any way to remove the white borders and put them into the BG colors aswell?

Best regards
Skender

Hello

I have found a solution:

#masthead {
    position: static;
}

#masthead,
#masthead:before {
    background: #1a94a5;
}

#masthead:before {
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media screen and (min-width: 1200px) and (max-width: 9000px) {
    #masthead:before {
        height: 300px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    #masthead:before {
        height: 225px;
    }
}

@media screen and (min-width: 783px) and (max-width: 991px) {
    #masthead:before {
        height: 275px;
    }
}

@media screen and (min-width: 603px) and (max-width: 782px) {
    #masthead:before {
        height: 300px;
    }
}

@media screen and (min-width: 421px) and (max-width: 602px) {
    #masthead:before {
        height: 250px;
    }
}

@media screen and (min-width: 172px) and (max-width: 420px) {
    #masthead:before {
        height: 210px;
    }
}

Best regards

Skender