Is it possible to change the logo and menu colour with CSS in the mobile view?

Site URL: https://madebydale.com

I'm using the following CSS code below (I got it from ghostplugins) for a custom mobile menu background and wanted to know if there was any way I could change my logo and menu colours to be white when someone clicks on the menu icon (to show up better on the background)?

Code:

// Your Own Mobile Menu Background //

.header-menu-bg {
background: url(https://static1.squarespace.com/static/5ed97dd68a102433a40c0dc3/t/62c9910b8f354d0bb07912db/1657377036033/Wall+Graffiti+-+Mobile+Menu.jpg);
background-size: cover;
background-position: center;
}

Pics below show my home page and then the mobile menu background.

Thanks in advance!

Two ways:

1. Header Editor panel

Click on the header to edit > Click on the mobile icon in the panel > Select Overlay Menu > Select Colors > Pick a theme/ edit theme so the section background is white

2. Design >  CSS

.header-menu-bg {
	background: white !important;
	opacity: 1 !important;
}

Thanks for this info, much appreciated!

Sorry I wasn't clear in my question though... I changed the menu text colour but I'm still wondering if I'm able to change the logo to white on the mobile version menu screen only (I would want it dark for the desktop version and all other pages in the mobile version, just white for the menu).

Is there any way to do that?

On 7/15/2022 at 11:37 PM, dalethompson said:

Thanks for this info, much appreciated!

Sorry I wasn't clear in my question though... I changed the menu text colour but I'm still wondering if I'm able to change the logo to white on the mobile version menu screen only (I would want it dark for the desktop version and all other pages in the mobile version, just white for the menu).

Is there any way to do that?

Add to Design > Custom CSS

body.header--menu-open header#header img {
    filter: brightness(0) invert(1);
}

Thank you for this!!