Jump to content

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

Recommended Posts

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!

 

 

2022-07-09_11-09-12.jpg

2022-07-09_11-08-37.jpg

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Link to comment

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?

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.