Custom CSS Not Loading Unless Opening the Editor

Site URL: https://apricot-coconut-f6eb.squarespace.com/

Hi there, this is my first question on this forum, forgive me if it's in the wrong area.

This seems like a problem others have had before, but none of the other solutions seemed to apply or work. Essentially I have replaced the header's background with an image, and it doesn't load unless I bring the editor back up. I've double-checked this with an Incognito window and it hasn't loaded. Check the CSS with CSSLint, and after a few edits, still nothing. The .PNG itself is only 75kb, so I can't imagine it being due to a heavy file size.

Site URL: https://apricot-coconut-f6eb.squarespace.com/
Password: magickal

Here's what the header looks like proper.

And here's the unloaded version from the Incognito window view

Just now, rchamberlain said:

Site URL: https://apricot-coconut-f6eb.squarespace.com/

Hi there, this is my first question on this forum, forgive me if it's in the wrong area.

This seems like a problem others have had before, but none of the other solutions seemed to apply or work. Essentially I have replaced the header's background with an image, and it doesn't load unless I bring the editor back up. I've double-checked this with an Incognito window and it hasn't loaded. Check the CSS with CSSLint, and after a few edits, still nothing. The .PNG itself is only 75kb, so I can't imagine it being due to a heavy file size.

Site URL: https://apricot-coconut-f6eb.squarespace.com/
Password: magickal

Here's what the header looks like proper.

And here's the unloaded version from the Incognito window view

Forgive me, here is the CSS I've entered. As you can see there isn't much.

.header-title-logo img {
    max-height: 130px;
}
#header {
    background-image: url(/s/SiteHeader-01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
}

Site URL: https://exmedcancercharitabletrust.squarespace.com/

Heres an odd one... I used code to style my nav and when im in the custom CSS block it looks exactly how I want it, But when im out of the custom CSS the colours change. I have double checked the colours on the style page and made sure to put important after my code...but I can't figure out the problem. any ideas?

https://exmedcancercharitabletrust.squarespace.com/

Password: studio@exmed

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

15 hours ago, paul2009 said:

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

 

After trying out the first two solutions in your bullets, the problem still persists. I contacted Squarespace Customer Care and was recommended to try the forums again, as custom CSS is outside the scope of what Customer Care would help with.

Not quite sure if anything is wrong with the CSS for the image itself, as the only warning I got in CSSLint was that I was using a header in the id instead of a selector. Though it wasn't considered an error and at least in the editor, the CSS still functions.

 If that indeed is causing the problem, I'm honestly not sure how to fix it. What would I write instead as a selector?

For reference it's this section of code:

Quote

 

#header {

    background-image: url(/s/SiteHeader-01.png);

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat; 

}

 

15 hours ago, paul2009 said:

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

 

I am also having the same problem.

I went through your list and the customer support team sent me to the Troubleshooting browser issues  (https://support.squarespace.com/hc/en-us/articles/115004581087) page. 

Im at a loss of what to do. The rest of the site is fine, it's just the Nav that's playing up.

Here is my code for reference:

/* Nav item color */
.header-nav-item a {
  border-radius: 25px;
    color: #702F8A !important;
    background-color: fade(#FFFFFF, 50%) !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #008A94 !important;
}
.header-nav-folder-item a {
    color: #ffff !important;
    background-color:#702F8A !important;
    padding: 5px !important;
}
.header-nav-folder-item:hover a {
    color: #259ea7 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #008A94 !important;
}
 
// Folder Menu Color //
.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  border-radius: 25px;
  background-color: #702F8A;
}

1 hour ago, S74 said:

Here is my code for reference:

/* Nav item color */
.header-nav-item a {
  border-radius: 25px;
    color: #702F8A !important;
    background-color: fade(#FFFFFF, 50%) !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #008A94 !important;
}
.header-nav-folder-item a {
    color: #ffff !important;
    background-color:#702F8A !important;
    padding: 5px !important;
}
.header-nav-folder-item:hover a {
    color: #259ea7 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #008A94 !important;
}
 
// Folder Menu Color //
.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  border-radius: 25px;
  background-color: #702F8A;
}

It has been solved! 

I used this code instead:

/* Nav item color */

.header-nav-item a {

border-radius: 25px;

color: #702F8A !important;

  background-color: fade(#FFFFFF, 50%) !important;

  padding-right: 15px !important;

  padding-left: 15px !important;

}

.header-nav-folder-content .header-nav-folder-item a{

  color:#fff !important;

}

/* Nav item hover color */

.header-nav-item a:hover {

    color: #008A94 !important;

}

.header-nav-folder-item a {

color: #ffff !important;

background-color: #702F8A !important;

padding: 5px !important;

}

.header-nav-folder-item:hover a {

    color: #259ea7 !important;

}

/* Nav item active color */

.header-nav-item--active a {

    color: #008A94 !important;

}

On 5/20/2021 at 7:01 PM, S74 said:

It has been solved! 

I used this code instead:

/* Nav item color */

.header-nav-item a {

border-radius: 25px;

color: #702F8A !important;

  background-color: fade(#FFFFFF, 50%) !important;

  padding-right: 15px !important;

  padding-left: 15px !important;

}

.header-nav-folder-content .header-nav-folder-item a{

  color:#fff !important;

}

/* Nav item hover color */

.header-nav-item a:hover {

    color: #008A94 !important;

}

.header-nav-folder-item a {

color: #ffff !important;

background-color: #702F8A !important;

padding: 5px !important;

}

.header-nav-folder-item:hover a {

    color: #259ea7 !important;

}

/* Nav item active color */

.header-nav-item--active a {

    color: #008A94 !important;

}

Can you explain what exactly changed? Perhaps I might be able to figure out what my own problem is.

Still at a loss.

On 5/23/2021 at 5:51 AM, rchamberlain said:

Can you explain what exactly changed? Perhaps I might be able to figure out what my own problem is.

Still at a loss.

Hi. You need to use FULL URL.

background-image: url(/s/SiteHeader-01.png);

/s/SiteHeader-01.png >>> change to full url

eg

Quote

background-image: url(https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png);

On 5/23/2021 at 8:34 PM, tuanphan said:

Hi. You need to use FULL URL.

background-image: url(/s/SiteHeader-01.png);

/s/SiteHeader-01.png >>> change to full url

eg

 

Looks like it's still not working. Here's my CSS in case I entered it wrong. No syntax errors or anything though.
 

Quote

.header-title-logo img {
    max-height: 130px;
}
#header {
    background-image: url(https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
}

8 hours ago, rchamberlain said:

Looks like it's still not working. Here's my CSS in case I entered it wrong. No syntax errors or anything though.
 

 

Try checking image url. I see it is blank.

https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png

On 5/28/2021 at 9:39 AM, tuanphan said:

Try checking image url. I see it is blank.

https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png

Forgive my delayed reply.

I've reentered the image url, but I'm not sure where the problem is. I thought perhaps I needed to update the link url since the image file is a linked file sitting in the list of my pages as shown here.

Having it as this sort of linked element was part of the instructions for replacing the header.

Before the link url was simply:

Quote

/s/SiteHeader-01.png

Though now that I've replaced the link with a full url, nothing has changed. Another dead end it seems. 

I'm not sure where the error is.

On 6/2/2021 at 1:20 PM, rchamberlain said:

Forgive my delayed reply.

I've reentered the image url, but I'm not sure where the problem is. I thought perhaps I needed to update the link url since the image file is a linked file sitting in the list of my pages as shown here.

Having it as this sort of linked element was part of the instructions for replacing the header.

Before the link url was simply:

Though now that I've replaced the link with a full url, nothing has changed. Another dead end it seems. 

I'm not sure where the error is.

https://apricot-coconut-f6eb.squarespace.com/?noredirect

Can you send the image file?

On 6/3/2021 at 5:15 AM, tuanphan said:

https://apricot-coconut-f6eb.squarespace.com/?noredirect

Can you send the image file?

 

Forgive me for replying so late, work on the site had to pause for a few weeks.

Just for the sake of closure, I wanted to say that once the Squarespace subscription was created by the client, the issues with the CSS and the header image completely stopped. It's working as intended now!