Mobile Only Header Background Color

My client's website has an adaptive header for desktop, which is great, but they want a black bar for mobile header. How can I do this?

Website is currently at: https://bluestonelandscape.squarespace.com pw: 1234

Thank you!

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
header#header {
    background-color: black !important;
}
}