Jump to content

Having trouble displaying my SVG logo in the header section.

Go to solution Solved by Web_Solutions,

Recommended Posts

I have followed these steps, and have utilized the code in Custom CSS, and all I am left with is a blank/transparent PNG where the logo belongs in the header section.

1. On your computer:

Create your SVG logo
Name it logo.svg for convenience
Create a transparent PNG file that has the same dimensions as your SVG logo
Name it anything you want
2. On your Squarespace:

Go into Edit mode
Hover over header
Select 'Edit Site Header'
Click on 'Site Title & Logo'
Upload the transparent PNG file into 'Logo Image'
Do not upload anything into 'Mobile Logo Image'; leave it blank
Save all changes
Exit Edit mode
3. On your Squarespace:

Go into Edit mode in any page
Create a text block
Type any word
Highlight it
Select 'Link' in the toolbar
Click on the gear icon
Click on 'File' in the left sidebar
Upload your SVG logo
Hit 'Save'
Exit Edit mode without saving
4. On your Squarespace:

Go to 'Design'
Click on 'Custom CSS'
Enter the following CSS code into the section:

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://your_domain_name.com/s/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Any help will be greatly appreciated.
Thank you,

https://ivesgrafik.com

https://ivesgrafik.com

Link to comment
  • Replies 9
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

9 minutes ago, BradleyK said:

I have followed these steps, and have utilized the code in Custom CSS, and all I am left with is a blank/transparent PNG where the logo belongs in the header section.

1. On your computer:

Create your SVG logo
Name it logo.svg for convenience
Create a transparent PNG file that has the same dimensions as your SVG logo
Name it anything you want
2. On your Squarespace:

Go into Edit mode
Hover over header
Select 'Edit Site Header'
Click on 'Site Title & Logo'
Upload the transparent PNG file into 'Logo Image'
Do not upload anything into 'Mobile Logo Image'; leave it blank
Save all changes
Exit Edit mode
3. On your Squarespace:

Go into Edit mode in any page
Create a text block
Type any word
Highlight it
Select 'Link' in the toolbar
Click on the gear icon
Click on 'File' in the left sidebar
Upload your SVG logo
Hit 'Save'
Exit Edit mode without saving
4. On your Squarespace:

Go to 'Design'
Click on 'Custom CSS'
Enter the following CSS code into the section:

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://your_domain_name.com/s/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Any help will be greatly appreciated.
Thank you,

https://ivesgrafik.com

https://ivesgrafik.com

Did you upload the SVG logo and where did you add the CSS code. I see you didn't do it.

Screenshot_312.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

I did all the steps including what you highlighted. I have re-entered the code as follows into the Custom CSS located within Website Tools:

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://ivesgrafik.com/s/ivesgrafik_logo_small.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Still does not work after repeatedly following all the steps. I've left my site logo-less so you can see that only the transparent PNG is displaying. Please let me know soon what I am missing or doing incorrectly.

Thanks.

Link to comment
14 minutes ago, BradleyK said:

I did all the steps including what you highlighted. I have re-entered the code as follows into the Custom CSS located within Website Tools:

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://ivesgrafik.com/s/ivesgrafik_logo_small.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Still does not work after repeatedly following all the steps. I've left my site logo-less so you can see that only the transparent PNG is displaying. Please let me know soon what I am missing or doing incorrectly.

Thanks.

Replace the Custom CSS code with the code below.

.siteTitle img {
    visibility: hidden
}

.siteTitle a {
    background-image: url(https://ivesgrafik.com/s/ivesgrafik_logo_small.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

 

Screenshot_313.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
1 minute ago, BradleyK said:

Please see the attached of where I uploaded the file to. Thanks for helping with this.

SCREENSHOT1.png

SCREENSHOT2.png

SCREENSHOT3.png

SCREENSHOT4.png

Replace the Custom CSS code with the code below.

.siteTitle img {
    visibility: hidden
}

.siteTitle a {
    background-image: url(https://ivesgrafik.com/s/ivesgrafik_logo_small.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

 

Screenshot_313.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
2 minutes ago, BradleyK said:

You are amazing! I'm amazed at your skills to be able to recode this.

Now, how do I enlarge the logo?

Thanks very much!

Brad

See the image.

Screenshot_315.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.