Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Different logo on mobile menu



5 answers to this question

Recommended Posts

  • 0

The obvious way to do this is using JavaScript which I am not quite yet familiar with. I still want to forward some suggestions though.

You can remove it from hover using the following code:

.header--menu-open .header-display-mobile .header-title-logo {
 display:none !important;

I pulled out a trick to make it black but the blue side turns red:

.header--menu-open .header-display-mobile .header-title-logo img {

Replace image with another image using CSS. This is quite a trick but feels a little bloated: (full credit)

.header--menu-open .header-display-mobile .header-title-logo img {
	display: block !important;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: url(image URL here) no-repeat;
	width: 400px;
	height: 400px;
	padding-left: 400px; /* keep this same as width */





Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
On 6/9/2021 at 4:23 PM, tzercarnt said:

Site URL: http://psykologopsen.no


The logo on my mobile menu is white and I have the other version of the logo, but how do I make it change to black logo when entering the menu only on mobile devices?

Best regards,


Do you want to fix these?

Site URL: https://www.psykologopsen.no/

1. (Mobile-Footer) Align left footer?


2. (Overlay Menu) Change logo color?


Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hi Tuanphan,

I've been trying to find an answer to the question I think he asked all over the Squarespace forum; I apologize if I missed it. I also tried the code from Aravsanj, but I wasn't able to get it to work.

I am trying to have the black version of my logo always appear on the mobile overlay menu, regardless of the logo appearing on the page behind it. I've included some pictures to illustrate--when the page has the black logo, the black logo appears in the menu. If the page has the white logo, the white logo appears on the menu. 

Could you please help when you have a moment? Thank you so much!! 

Logo URL here (the black one I want): https://static1.squarespace.com/static/5fda74d2609d110fc83247da/t/60c793c9b664f91202956aa7/1623692233222/drb+black.png

Site URL here: www.debrarbryson.com

Page with white logo.PNG

Menu with white logo.PNG

Page with black logo.PNG

Menu with black logo.PNG

Edited by senecabryson
I accidentally had "@media only screen and (max-width: 640px) {" at the end of my hyperlink for the image, my apologies
Link to comment
  • 0

Thanks for bringing this up again. I recently learned a better and easier way to do this and I hope it works. Try adding the below code to your custom CSS.

.header--menu-open .header-display-mobile .header-title-logo a {
background-image: url("https://static1.squarespace.com/static/5fda74d2609d110fc83247da/t/60c793c9b664f91202956aa7/1623692233222/drb+black.png");

I want to recall my earlier post. Try the below code on custom CSS:

.header--menu-open .header-display-mobile .header-title-logo a {
content: url("URL OF YOUR BLACK LOGO");


Edited by aravsanj




Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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...