Jump to content

Dynamic Logo (Light/Dark)

Recommended Posts

  • 2 months later...

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

✦✦
Co-founder Hundred Studio 👋

Link to comment
16 hours ago, CraigN said:

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

You found the solution or you need help?

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
6 hours ago, tuanphan said:

You found the solution or you need help?

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

✦✦
Co-founder Hundred Studio 👋

Link to comment
22 hours ago, CraigN said:

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

Try adding to Design > Custom CSS

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
} 

 

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
  • 4 weeks later...
  • 1 month later...
On 11/16/2022 at 11:31 PM, JeSuis said:

Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks!

Hi,No

The code can change to white or black only

To change to grey, you need to use this new code, with new grey image url

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/10/21/10/51/snail-7536762_1280.jpg);
}
} 

Replace Pixabay image with a grey image url

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 months later...

For a simple inverting of the header logo color site wide, this works. Place in your Custom CSS:

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);
}}

Thanks to https://spacesites.com.au/tips/squarespace-71-2-methods-to-swap-out-logos-colour-sections-and-specific-pages for the tip and cheat sheet on theme colors. Alternatively, you could switch out the logo graphic as described in the spacesite.com link above.

Link to comment

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.