Dark and light version of logo

Site URL: https://grapefruit-maroon-t44d.squarespace.com/

Hey team, 

I am wondering if anyone has an easy solution to having a dark and light version of the logo that works with the colour settings in the nav?

For example the logo looks great in white on a banner image but when I have a page that doesn't have a banner image the logo is lost on the white background. It's easy to set up the nav items to behave correctly on different pages but the logo seems a bit trickier. Surely Squarespace haven't presumed people are just going to bypass logos and write the business name in a font so it works?!

I am using 7.1 

Thanks in advance

What is access password?

Hey @tuanphan password is 54321

Cheers

On 2/25/2020 at 5:21 AM, Tom5362 said:

Hey @tuanphan password is 54321

Cheers

To change logo to black on one page, add this to Page Settings > Advanced > Header

<style>
  .header-title-logo img {
    filter: invert(1);
}
</style>

Legend, cheers!

On 2/27/2020 at 10:29 AM, tuanphan said:

<style> .header-title-logo img { filter: invert(1); } </style>

This works great. Thanks @tuanphan.

Is there a way of inverting the logo also in the mobile menu?

1 minute ago, djm said:

This works great. Thanks @tuanphan.

Is there a way of inverting the logo also in the mobile menu?

 

Can you share link?

https://thermodynamx.squarespace.com

I just noticed: the logo on mobile changes, depending on what page I’m on (I’ve already used the »invert« code on the pages »Home«, »Angebot« and »News«. So I would need a separate »invert« command for the mobile menu.

I also cannot find, where I can change the mobile menu background colour...?

3 minutes ago, djm said:

https://thermodynamx.squarespace.com

I just noticed: the logo on mobile changes, depending on what page I’m on (I’ve already used the »invert« code on the pages »Home«, »Angebot« and »News«. So I would need a separate »invert« command for the mobile menu.

I also cannot find, where I can change the mobile menu background colour...?

@media screen and (max-width:767px) {
.header--menu-open .header-title-logo img {
    filter: invert(0);
}
.header-menu-bg.theme-bg--primary {
    background: red !important;
}
}

Thanks @tuanphan. This works perfectly with the logo.

The background colour works too. But now I need to change the font colour....

Why is there no mobile options for mobile design in 7.1? I miss that.

5 hours ago, djm said:

Thanks @tuanphan. This works perfectly with the logo.

The background colour works too. But now I need to change the font colour....

Why is there no mobile options for mobile design in 7.1? I miss that.

 

.header--menu-open nav.header-menu-nav-list * {
    color: green !important;
}

20 hours ago, tuanphan said:

.header--menu-open nav.header-menu-nav-list * { color: green !important; }

Nice. Thanks so much.

Noticing 2 last things here:

• the X for closing the menu is dark
• the Button is not displaying in my usual button style (capitals).

Any code for this? @tuanphan

@tuanphan I just tried the code on my site and it didn't work. I have an SVG file for the logo.. could that be the issue?

https://www.charliee.com/niftygateway

Trying to make the logo white..

Hello, 

I'm looking to make the logo dynamic in the header on the internal blog pages for our Press section.

https://www.holisticbeautygroup.com/press/the-disjointed-state-of-indie-beauty-in-2023

Is this possible? For all internal blog pages?

@laurenc_harvey Use this code:

.view-item .header-title-logo img{

filter: invert(1);

}

Do i inject it in the header for just the blog? Or where to I place that code?

Inject it in custom css.