Jump to content

CSS <content> is overwriting my SVG logo

Go to solution Solved by mrpower,

Recommended Posts

Posted (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 by mrpower
wrong url
  • Solution
Posted

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>

Posted

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;
}

 

-------- > 👆 <---------- 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)

  • 3 weeks later...
Posted
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

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.