mrpower Posted November 14, 2023 Posted November 14, 2023 (edited) Hi, I have inputted an SVG logo in my header, however only on certain pages the "visibility: hidden !important;" code isn't hiding the original PNG logo. It seems there's some CSS "content: url(…)" that is overwriting the visibility hidden. Resulting in 2 overlapping logos. This content code is tagged as !important and it's proving difficult to target. How do I hide the image here so only the svg shows? Site: https://mrwatt.co.uk/work (it works here) Site issue: https://mrwatt.co.uk/puregym-pride-2019 (overlapping logo) password: 2121 Thanks Edited November 14, 2023 by mrpower wrong url
Solution mrpower Posted November 15, 2023 Author Solution Posted November 15, 2023 SOLVED: Removed the custom code from the header and included it in the footer. <!---SVG LOGO---> <style> /*Hide PNG Logo*/ .header-title-logo img, .header-mobile-logo img{ visibility: hidden !important; } /*Replace with SVG Logo*/ div.header-title-logo a, .header-mobile-logo a{ content: url('/file.svg') !important; max-width: 290px; margin-left: auto; margin-right: auto; </style>
melody495 Posted November 15, 2023 Posted November 15, 2023 Hi, those are CSS styling code, you can put them here Website -> Website Tools -> Custom CSS. Without the style tags, like below. Also, not sure if it's just copy and paste error, you're missing the closing } at the end of your code. /*Hide PNG Logo*/ .header-title-logo img, .header-mobile-logo img{ visibility: hidden !important; } /*Replace with SVG Logo*/ div.header-title-logo a, .header-mobile-logo a{ content: url('/file.svg') !important; max-width: 290px; margin-left: auto; margin-right: auto; } mrpower 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you)
mrpower Posted December 4, 2023 Author Posted December 4, 2023 On 11/15/2023 at 11:22 PM, melody495 said: Hi, those are CSS styling code, you can put them here Website -> Website Tools -> Custom CSS. Without the style tags, like below. Also, not sure if it's just copy and paste error, you're missing the closing } at the end of your code. /*Hide PNG Logo*/ .header-title-logo img, .header-mobile-logo img{ visibility: hidden !important; } /*Replace with SVG Logo*/ div.header-title-logo a, .header-mobile-logo a{ content: url('/file.svg') !important; max-width: 290px; margin-left: auto; margin-right: auto; } Thanks
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment