Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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 http://wordpress.org/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
