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

Dark and light version of logo


Tom5362

Question

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

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

To change logo to black on one page, add this to Page Settings > Advanced > Header <style> .header-title-logo img { filter: invert(1); } </style>  

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

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

Posted Images

11 answers to this question

Recommended Posts

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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?

Screenshot 2020-04-29 at 08.55.34.png

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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.

 

Link to post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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

Screenshot 2020-04-29 at 17.34.12.png

Edited by djm
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...