Jump to content

Logo code not working on mobile view

Recommended Posts

I have added some custom code to my logo file to invert its color on certain pages so it's visible. It works perfectly on desktop, but not on mobile. I will past the code I used below. Any help would be much appreciated!

<style>
 .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Link to comment
14 hours ago, jshears18 said:

I have added some custom code to my logo file to invert its color on certain pages so it's visible. It works perfectly on desktop, but not on mobile. I will past the code I used below. Any help would be much appreciated!

<style>
 .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Can you share us your site with the protected password to 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, Keyword Highlighter
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
On 11/29/2021 at 11:00 PM, jshears18 said:

@bangank36 I sent you a private message with the info. Thanks!

You can try adding to Home > Design > Custom Css

.header--menu-open .header-mobile-logo img,
body:not(.header--menu-open) #header:not(.black) .header-mobile-logo img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36
clean, full update

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, Keyword Highlighter
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

My testing result

image.png.b23a040eeaaf5efd9e3763ca8b163e4d.png

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, Keyword Highlighter
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
23 hours ago, jshears18 said:

@bangank36 It works on the menu screen, but it's not appearing on the shop or contact page. Is there a code I can use for those?

Kindly add the following code in your Home > Design > Custom Css to fix logo on shop and contact page

body:not(.header--menu-open) #header:not(.black) .header-mobile-logo img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

Let me know how it works on your site

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, Keyword Highlighter
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

I've just update my previous reply with full solution for both cases

For those who may need it

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, Keyword Highlighter
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

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.