How do I change the bg color of the mobile hamburger menu (and the colors there in general)

I have everything nearly how I want it, except for the way the hamburger menu overlay displays in the mobile view. This is at present what it looks like when you click the hamburger button for the mobile view:

I tried going to site styles->Colors->My Theme, selecting the theme I have assigned to my "site header" section, and looking for where I would set this color, but I can't seem to find it. I don't want this bright yellow background. Also, I'd like to be able to change the color of the buttons on this overlay. Where might I find within the theme how to change those colors? Everything else has been super easy and doable via the themes. I must just be tired and missing something obvious. Thanks for the help!

Hi, can anyone help.

I have changed the colours in the menu overlay options - see screengrab. I would like my menu overlay background colour to be the acid greeny/yellow (in my template) with black text links, but the colours aren't there. I am getting a purple (which is one of my site colours) background (see screengrab). Can anyone help?

https://reindeer-dandelion-kyhx.squarespace.com/

Password: reindeer123

Thanks
Laura

On 7/12/2024 at 10:29 PM, dotandpeg said:

Hi, can anyone help.

I have changed the colours in the menu overlay options - see screengrab. I would like my menu overlay background colour to be the acid greeny/yellow (in my template) with black text links, but the colours aren't there. I am getting a purple (which is one of my site colours) background (see screengrab). Can anyone help?

https://reindeer-dandelion-kyhx.squarespace.com/

Password: reindeer123

Thanks
Laura

 

You can use this code to Website Tools > Custom CSS

div.header-menu-bg.theme-bg--primary {
    background-color: yellow !important;
}
div.container.header-menu-nav-item * {
    color: #000 !important;
}
body.header--menu-open div.burger-inner>div {
    background-color: #000 !important;
}

@tuanphan, thank you that worked!