How can I change the logo for the hamburger menu?

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>

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

My testing

10 hours ago, bangank36 said:

My testing

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

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

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

On 10/31/2022 at 9:30 AM, tuanphan said:

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

 

It worked!! thank you so much!! 😄