Having trouble displaying my SVG logo in the header section.

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

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.

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.

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
}

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

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

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.

Thank you again, I truly appreciate your help.

Brad

3 minutes ago, BradleyK said:

Thank you again, I truly appreciate your help.

Brad

Welcome!