Unite: Full width header background color with logo staying where it is

Unite Theme
1

Hello

Your theme is awesome. Thanks for sharing your brilliant work with us.

I am trying to set up a page which needs the header in the same color as the nav bar. I tried and tried but was not able to change the header background color to be full width with the logo staying where it is by default. Is there any solution to this?

Thanks in advance

Best regards
Skender

2

I have found a custom CSS code in the WordPress Support Forum:

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

}

This works for PC resolutions. But for mobile phones there is still a white border around the header. Does someone know how to change this white border into the background color?

Best regards
Skender

3

This works for me:

#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