Jump to content

How can I change the logo for the hamburger menu?

Recommended Posts

Hi,

I am using the code below to change the logo on the home page, however, the code effects the entire page so when i click the hamburger menu, the logo is white. I do not want that because it is not very visible. I want the logo to be white on the homepage but change back to black when you click on the hamburger menu like it does on the other pages. How can I do that?

 

https://tlcdesign-sylvie.squarespace.com/home

password: sylvie

 

 

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/634facca9a1aa046ad910a6c/t/635193f56754c829ac99d578/1666290677453/172DB8AD-65EF-4986-BCF0-AEE53CCF6716.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, TLCDesign said:

Hi,

I am using the code below to change the logo on the home page, however, the code effects the entire page so when i click the hamburger menu, the logo is white. I do not want that because it is not very visible. I want the logo to be white on the homepage but change back to black when you click on the hamburger menu like it does on the other pages. How can I do that?

 

https://tlcdesign-sylvie.squarespace.com/home

password: sylvie

 

 

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/634facca9a1aa046ad910a6c/t/635193f56754c829ac99d578/1666290677453/172DB8AD-65EF-4986-BCF0-AEE53CCF6716.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Try adding to Home > Design > Custom Css

/*invert logo color when open hamburger*/
.header--menu-open .header-display-mobile .header-title-logo a {
  -webkit-filter: invert(1);
  filter: invert(1);
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.c48ce4b3a9a71c8050d78f7ce149d9c4.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
10 hours ago, bangank36 said:

My testing

image.png.c48ce4b3a9a71c8050d78f7ce149d9c4.png

Hi there, 

Thanks for the code but that isn’t quite what I’m looking for, I don’t want it to be inverted because that also effects the colour of the logo (the red lips become green)

I just want the white logo on the home page to stay white but then change back to the normal black logo when pressing the hamburger menu. Would that be possible?

The following picture is how I want the logo to look on the hamburger on the entire site. It currently works on all the other pages apart from the home page because I uploaded it on the site but then used a code to insert a new logo (the white version) for just the home page. But the issue is in doing so is that it applies to the whole page thus also changing the hamburger menu on the homepage to be the uploaded white version, which I don’t want.

I want it to change back to the black version

 

Sorry I hope that makes sense

CE384680-BA11-4A4D-ADB4-586B3B613E29.jpeg

Edited by TLCDesign
Link to comment
On 10/26/2022 at 8:36 PM, TLCDesign said:

@tuanphan hey, would you be able to help with this problem??

 

Add this to Design > Custom CSS

body.header--menu-open .header-title-logo a {
    background-image: none !important;
}
body.header--menu-open .header-title-logo img {
    visibility: visible !important;
}

 

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
  • 2 weeks later...

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.