Code briefly showing before page loads

Hi.

On my client's website on the WORK page there is a line of code that appears for a second before the page loads (also happens on mobile). Weirdly the code that flashes up is actually being used to target the SERVICES page to keep the depth of the cards consistent and it's working fine.  I just don't know a) why it's showing at all   and b) why it would show on the WORK page and not the page that it's relevant to.   The code is in the Custom CSS along with all my other code that is working fine and not showing on any of the pages before loading. 

I've attached a screengrab of the line of code that appears briefly.  (you'll have to expand it to be able to read)

You should be able to see it if you load https://www.coco-comms.me/work

Thanks in advance for any tips to get rid of it!

You have style code injected into the header but without any style (or other tags) around it, so it gets loaded as text. You'll want to locate and remove it (it's currently not doing anything) or place it within style tags if you do need it.

Let me know if that works, and give me a thumbs up here if you can, thanks!

Hi Ziggy, sorry for late response!  

Thanks very much for your suggestion, but I don't have any code injected into the header (in the Advanced > Code Injection section of Squarespace it is completely empty).  This is what is so strange.  I have several bits of CSS code in the Design> Custom CSS box but it's specifically only this line that is appearing when the WORK page loads.  It's doing the job of keeping the boxes on the Services page a consistent size, but even if I delete this line of code from Custom CSS it still shows up when loading the WORK page.  I just can't work it out -  it's almost like it's being pulled from somewhere else.  

Scratching my head...

4 minutes ago, Pinkers said:

Hi Ziggy, sorry for late response!  

Thanks very much for your suggestion, but I don't have any code injected into the header (in the Advanced > Code Injection section of Squarespace it is completely empty).  This is what is so strange.  I have several bits of CSS code in the Design> Custom CSS box but it's specifically only this line that is appearing when the WORK page loads.  It's doing the job of keeping the boxes on the Services page a consistent size, but even if I delete this line of code from Custom CSS it still shows up when loading the WORK page.  I just can't work it out -  it's almost like it's being pulled from somewhere else.  

Scratching my head...

Do you have code injection for that specific page?

The code that is showing is for the SERVICES page:

/* equal height of list cards SERVICES */
@media screen and (min-width:600px) {
.user-items-list-item-container[data-section-id="61df0ea5974d4f33fe32e432"] .list-item-content__description {
    min-height: 500px;
}
}

But weirdly that code loads when you go to the WORK page... https://www.coco-comms.me/work

You'll see it flash up before the page loads.

Just to clarify, all the code that I've put into Custom CSS is doing it's job - it's all working properly.   It's just that the code that is targeting the Services page is flashing up on the Work page before it loads.  

@Pinkers There is a header code injection for each page, found in the Page Settings -> Advanced, have you looked in there?

I don't think he's saying that there isn't any injection code. He's saying the injection code is working perfectly, but that code flashes up for a brief moment.

I'm having exactly the same issue. My site is working fine but my injection code flashes up at the top of the screen briefly. It's driving me crazy and I can't find the fix. I don't want to remove the injection code or people can't jump back to the top.

2 minutes ago, RAW said:

I don't think he's saying that there isn't any injection code. He's saying the injection code is working perfectly, but that code flashes up for a brief moment.

I'm having exactly the same issue. My site is working fine but my injection code flashes up at the top of the screen briefly. It's driving me crazy and I can't find the fix. I don't want to remove the injection code or people can't jump back to the top.

Can you share your website URL? If the code is flashing up then it may not be wrapped in the correct tag and rendering as plain text.

Sure, thanks so much for helping a clueless noob here!

https://www.gregrawson.com/

Yes, it looks like you have style code that is not wrapped in style tags so it's not working how you want and rendering as plain text. All of that text should be wrapped like this:

<style>
#back-to-the-top{ position: fixed!important; bottom: 0!important; left: 0!important; z-index:1!important; opacity: 0.8; }
</style>

My mistake. Copied your code exactly and it fixed it.
Thanks so much for your help!

48 minutes ago, RAW said:

My mistake. Copied your code exactly and it fixed it.
Thanks so much for your help!

Happy to help

I have the exact same issue. I wanted the logo in the center and used a tutorial. The code is popping up briefly and I'm not sure where to insert the tags? I would also love black lines on either side of the logo and wish there was a way to style those is as well.

Here is the website:

https://www.thetrellisvenue.com/

Any help would be greatly appreciated.

Here's the code I used:

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #5B614F !important;
}

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/

@splitAfterItem: 3;
@actionSize: 20px; 
@logoSpacing: 3vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

16 minutes ago, StephanieWagner said:

Here's the code I used:

You added all of this to Custom CSS?

The reason that you have code loading before the website is that some of the code in the header code injection is outside of the style tags.

Here's the corrected code for the header:

<style>
  .header-nav-folder-content {
    background: #5B614F !important;
  }
  /* Change dropdown menu background */
  .header-nav-folder-content {
    background: #6a692f !important;
  }
</style>

Thank you! It still wants to throw an error? I was attempting to put the logo in the center of the header and split the menus. Then I wanted the drop down menu color to change once it was clicked. It there a tutorial that you know of that might can help? Again, thank you for your time. 

I can have a look tomorrow, but I find that split navigation on Squarespace 7.1 will always a problem until Squarespace adds it as an default option.

You still have a portion of the style code (now repeated) outside the <style> tags in your headed. Delete the second instance of this:

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #6a692f !important;
}

On 2/18/2023 at 5:14 PM, Pinkers said:

But weirdly that code loads when you go to the WORK page... https://www.coco-comms.me/work

This one has exactly the same problem. 

The problem here is that when you add styling to Custom CSS you can just type it is, but when you add it to Code Injection this is HTML and it MUST be wrapped in the correct tags so it is treated as the correct type of code, in this case custom styling.

So when you add any styling to Code Injection it MUST be in this form:

<style>

/* YOUR STYLING */

</style> 

Note the opening <style> tag before the styling code and the closing </style> tag after the styling.

(Please delete /* YOUR STYLING */)

Sorry to bother you again. I took the code out of Custom CSS, but it is embedded. How do you remove it when you can't access it? 

"*/ Change dropdown menu .....

Pops up when the website loads and I deleted it from Custom CSS????

Thank you for any help or advice! You're amazing! 

Please read through my previous message. This text is in your HEADER CODE INJECTION without style tags. It needs to be removed from the page or global HEADER CODE INJECTION.

Found it!

It's fixed! Thank you again and I hope you have a wonderful Thursday! 

15 minutes ago, StephanieWagner said:

It's fixed! Thank you again and I hope you have a wonderful Thursday! 

Fantastic!

This website still has the problem on the work page, similarly, it should be found in the page settings Advanced -> Code Injection:

https://www.coco-comms.me/work