Meezus Posted January 8, 2020 Share Posted January 8, 2020 Hello all. I am currently using the Sonora Template which gives a nice banner image layered underneath the logo, so I have chosen a white logo. However all other pages are white headers so the logo does not show. How can i use a black logo and then invert or use a custom logo just on the homepage so that the logo it white on the homepage Thanks. Link to comment
christyprice Posted January 8, 2020 Share Posted January 8, 2020 You can do this by adding code to the page code injection. For Brine family templates like Sonora, you'd use <style> .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> You can follow exact steps in this post. It also covers Bedford family templates and inverting the navigation color as well. christyprice.com 🇺🇸 Austin, TX US Best Squarespace Plugins • Resources for Designers • Make Money with your Blog ✅ Download a FREE Squarespace Prelaunch Checklist Link to comment
Meezus Posted January 9, 2020 Author Share Posted January 9, 2020 hellz yeah thanks so much Link to comment
usingmyhead Posted January 20, 2020 Share Posted January 20, 2020 Or if you want to put this code in once and have it work on all instances of pages where you don't use a banner image, you can use this tweak on the code from @christyprice .Header:not(.Header--overlay) img.Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.