Squarespace 7.0 Make the Nav bar a solid colour in mobile

Hello friends

I have a full bleed image on my homepage which extends to the top of the page where the Nav bar is. Currently my nav bar has a transparent background so I'm forced to pick an image that allows the nav bar links to be legible.

In mobile view however, my nav bar is not legible and I want to use the same photo. 

Can you help me change the nav bar in mobile view to have black font and a white background so that it is legible.

Needing help asap! Thank you

Best,

Catherine

Can you share your website URL please?

@Ziggy https://www.catherinenemanic.com

You can try this to Website Tools > Custom CSS

@media screen and (max-width:767px) {
header#siteHeader {
    background-color: black !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
}
}