Jump to content

Inverting color of mobile logo only on one page.

Recommended Posts

38 minutes ago, Adcho said:

Hi,

I was wondering if there was a way to invert the mobile logo on just one specific mobile page?

It was fairly easy to find information on how to invert the logo on one specific web page, but not for mobile. 

Thank you in advance! 🙂

Can you share your site with the site-wide password so we can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Here you go! I have several other projects that have the inverted logo for desktop, but I would like to make the mobile version inverted to white as well. Currently the mobile logo is black.

Edited by Adcho
privacy reasons
Link to comment
On 5/25/2022 at 6:10 AM, Adcho said:

Hi,

I was wondering if there was a way to invert the mobile logo on just one specific mobile page?

It was fairly easy to find information on how to invert the logo on one specific web page, but not for mobile. 

Thank you in advance! 🙂

If Squarespace 7.1, you can edit that page >> Add a Code Block on bottom of page > Paste this code

<style>
  @media screen and (max-width:767px) {
    header#header img {
    	filter: invert(1);
    }
  }
</style>

If it doesnt work, change 1 to 0

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
On 5/26/2022 at 3:44 AM, tuanphan said:

If Squarespace 7.1, you can edit that page >> Add a Code Block on bottom of page > Paste this code

<style>
  @media screen and (max-width:767px) {
    header#header img {
    	filter: invert(1);
    }
  }
</style>

If it doesnt work, change 1 to 0

Hi it works great, but I just noticed that it remains black for the tablet view logo as well. Is there a way to invert it for both tablet and mobile within the same code or would another one be needed?

Edited by Adcho
privacy
Link to comment
On 5/26/2022 at 3:34 PM, Adcho said:

Hi it works great, but I just noticed that it remains black for the tablet view logo as well. Is there a way to invert it for both tablet and mobile within the same code or would another one be needed?

Change 767px to 991px

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

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.