Custom code not displaying on live site

I have a site which i've created with custom code which works on the Squarespace system, but code is not working when the site is live.  The things that aren't working are:

- Navigation hover and active underline

- Hover on logos on home page

- Custom fonts on 'Business Assets' pages - I've attached an example for the custom fonts.

Has anyone experienced this and is there something stopping the code from working? Support would be welcome please.

What is site url + which code did you use?

Hey, 

URL Is https://www.simplyfoodsolutions.co.nz/

I could understand if some code is wrong, but for it to not all display is a bit strange.

Happy to provide private access if you want.

Custom Code is as below:

/* Nav item active color */
.header-nav-item a:hover, .header-nav-item--active > a {
    text-decoration: underline !important;
    text-decoration-color: #74C163;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 2px !important;
    background: none !important;
}

.header-nav-item:nth-child(1) a {
    text-decoration-color: #74C163 !important;
}
.header-nav-item:nth-child(2) a {
    text-decoration-color: #74C163 !important;
}
.header-nav-item:nth-child(3) a {
    text-decoration-color: #74C163 !important;
}
.header-nav-item:nth-child(4) a {
    text-decoration-color: #74C163 !important;
}

/* Hover images homepage */
@media-screen-only{
#block-id{
opacity: 0;
 transition: opacity 1s
}

#block-id:hover {
opacity: 1;
transition: opacity 1s
}
}

/* Custom Font Aspire Foods/Brando */
@font-face 
{font-family: 'brando-regular';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65d199495b1e0b05d85e118e/1708235083565/brando-regular.ttf)
}

#collection-65c44a538f78ca6b88809d92 
h1{
font-family: "brando-regular" !important;
} 

#collection-65c44a538f78ca6b88809d92 
h2{
font-family: "brando-regular" !important;
} 
#collection-65c44a538f78ca6b88809d92 
h3{
font-family: "brando-regular" !important;
}  
#collection-65c44a538f78ca6b88809d92 
p{
font-family: "brando-regular" !important;
}

/* Custom Font Prepared Produce/Biennale */
@font-face 
{font-family: 'Biennale-Medium-585509';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65d18fef49210b18ee4f530b/1708232688233/Biennale-Medium-5855099.otf)
}

@font-face 
{font-family: 'Biennale-Medium-5855099';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65d18fef49210b18ee4f530b/1708232688233/Biennale-Medium-5855099.otf)
}

h1 {
font-family: "Biennale-Medium-585509" !important;
}  

h2 {
font-family: "Biennale-Medium-585509" !important;
}  

#collection-65c57c93d1487105e05a2166
h3 {
font-family: "Biennale-Medium-585509" !important;
}

#collection-65c57c93d1487105e05a2166 
p {
font-family: "Biennale-Medium-5855099" !important;
}

/* Custom Font Imports/Gilroy */
@font-face 
{font-family: 'Gilroy-SemiBold-5538899';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65cd8d09a103977117190536/1707969801884/Gilroy-SemiBold-5538899.otf)
}
  
@font-face 
{font-family: 'Gilroy-Light-5538887';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65d191aa93c1804055017e11/1708233130765/Gilroy-Light-5538887.otf)
}
#collection-65ca95819c59b04ef71531c2
h1 {
font-family: "Gilroy-SemiBold-5538899" !important;
}
#collection-65ca95819c59b04ef71531c2
h2 {
font-family: "Gilroy-SemiBold-5538899" !important;
}

#collection-65ca95819c59b04ef71531c2
h3 {
font-family: "Gilroy-SemiBold-5538899" !important;
}

#collection-65ca95819c59b04ef71531c2 
p {
font-family: "Gilroy-Light-5538887" !important;
}

/* Custom Font Total Repac/Effra */
@font-face 
{font-family: 'Effra_Std_Rg';
src:
url(https://static1.squarespace.com/static/65a97fd777ec2d56abcaf985/t/65cd8d09a103977117190536/1707969801884/Gilroy-SemiBold-5538899.otf)
}

#collection-65ca9974bc243b5dace36a04
h1 {
font-family: "Effra_Std_Rg" !important;
}
#collection-65ca9974bc243b5dace36a04
h2 {
font-family: "Effra_Std_Rg" !important;
}
#collection-65ca9974bc243b5dace36a04
h3 {
font-family: "Effra_Std_Rg" !important;
}
#collection-65ca9974bc243b5dace36a04
h4 {
font-family: "effra-cc" !important;
}
#collection-65ca9974bc243b5dace36a04 
p {
font-family: "Effra_Std_Rg" !important;
}

/* Image Hover */
#block-4b4e514078a8530fdc01 {
       transition: 0.3s !important;
       &:hover {
      transition: 0.3s !important;
      margin-top: -10px;
    }
  }
#block-304a917593a9f11239cb {
       transition: 0.3s !important;
       &:hover {
      transition: 0.3s !important;
      margin-top: -10px;
    }
  }
#block-61792d008fa4e26334b9 {
       transition: 0.3s !important;
       &:hover {
      transition: 0.3s !important;
      margin-top: -10px;
    }
  }
#block-29515c3590edeebdc1fa {
       transition: 0.3s !important;
       &:hover {
      transition: 0.3s !important;
      margin-top: -10px;
    }
  }

Your CSS has syntax errors starting at the following.

/* Hover images homepage */
@media-screen-only{

Hey, are you able to be more specific? Is one syntax error going to affect all the code from working?

19 hours ago, Charlottenz said:

Is one syntax error going to affect all the code from working?

It depends on the error and what the language of the code is.

In this case I suspect that everything after this error would not work. I haven't spent time testing because it's just easier to fix the error knowing it's there.