Injected Code Affecting All Pages Instead of Just One

Site URL: https://nymn.org

Hello,

I'm using some custom HTML to create a fixed floating button on my website's homepage that visitors can click to join our mailing list. The code is injected into the Homepage HTML, with the goal being for the button to only appear on the Homepage. However, the button is persistent across the entire site, which we do not want. On the Squarespace backend, the button acts as expected, appearing on the Homepage but disappearing on all other pages. However, when the webpage is opened up seperately, the button is visible on all pages. I've posted the HTML as well as the CSS we are using down below. Any help is appreciated, thank you!

Quote

<div class="kl-float">
   <a href="https://mailchi.mp/nyministrynetwork/nymn-communication-signup">
   <h9 style="color:white">JOIN OUR MAIL LIST</h9>
   </a>
</div>

Quote

.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #1d6b69;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

Just to confirm, you pressed the gear next to the home page -> advanced -> code injection.

Not the site wide code injection?

17 hours ago, rwp said:

Just to confirm, you pressed the gear next to the home page -> advanced -> code injection.

Not the site wide code injection?

@rwpI do not believe I put it in the sitewide code injection. I did as you mentioned, clicking the gear next to the specific page and adding the code their in the advanced tab. The CSS however is sitewide.

Try adding the css to the page code injection as well, and remove it from the sitewide CSS.

<style>
  .kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #1d6b69;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
} 
</style>

I have this exact same problem ... I know Im putting it in the correct place. Clicking the gear icon > advanced ... and it works in the backend builder but as soon as I preview it in the browser the code is affecting every page. Did you manage to figure it out?

Hi. Add this to Home > Design > Custom CSS to remove button on other pages

body:not(.homepage) .kl-float {
	display: none;
}