I need help changing my logo to white when the user selects the menu for the mobile version of my website

I need help changing my logo to white when the user selects the menu for the mobile version of my website. I know how to change the logo color to white on the desktop version of my website, but I need help changing the color to white for mobile.

The password to my website is: stpaulsstaff

Hi,

What is site url?

The site url is: oceangrove.church
 

I need help changing my logo to white when the user selects the menu for the mobile version of my website. I know how to change the logo color to white on the desktop version of my website, but I need help changing the color to white for mobile.

The password to my website is: stpaulsstaff

I see you changed logo to white color. Do you still need help?

Hi, so when I am on a page on mobile and the logo is blue, and I open up the menu to go to different pages, the logo is still blue. I want to change the logo to white when people open up the menu. Can you help me with this?

Hey, that did not work. Whenever I go to a page on the mobile version of my website, and it has a blue logo, and I click the burger icon to go to the menu, the logo is still blue, while the background for the menu is blue. I want the logo to change to white whenever the burger icon is clicked.

I hope this extra information helps!

The site url is: oceangrove.church

The password to my website is: stpaulsstaff

Just tested the code & It still works here. Where did you add the code? Can you take a screenshot? and Can you add & Keep it in CSS box? We can check it again easier

Nevermind, it works!

Hi @tuanphan I am trying to achieve something similar on my site. I'm currently using one of your html solutions to change the logo to a different file on certain pages of my site, however I need to also change it on my mobile menu from red to the off white. My site is:
nicoleniezgoda.com
PW: AnoukTuuli

Any help would be greatly appreciated. 

This is the code I have injected on certain pages that is working so far to change to a different color/file:
<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/6489f12d5931691c0bdd9856/t/64b703e9d1ddd330ad3d685f/1689715689320/Asset+2%40300x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

On 7/25/2023 at 4:48 AM, nmbenson1 said:

Hi @tuanphan I am trying to achieve something similar on my site. I'm currently using one of your html solutions to change the logo to a different file on certain pages of my site, however I need to also change it on my mobile menu from red to the off white. My site is:
nicoleniezgoda.com
PW: AnoukTuuli

 

Any help would be greatly appreciated. 

 

This is the code I have injected on certain pages that is working so far to change to a different color/file:
<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/6489f12d5931691c0bdd9856/t/64b703e9d1ddd330ad3d685f/1689715689320/Asset+2%40300x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Use this new code

<style>
 header#header img {
    content: url(https://static1.squarespace.com/static/6489f12d5931691c0bdd9856/t/64b703e9d1ddd330ad3d685f/1689715689320/Asset+2%40300x.png);
}
</style>

Thanks @tuanphan - is this to be injected in design<custom css?

20 hours ago, nmbenson1 said:

Thanks @tuanphan - is this to be injected in design<custom css?

Page Header. If you use Personal/Basic Plan > Edit Page > Add a Code Block > Paste the code