Floating button only appears upon site reload. Help please!

Hi all!

Firstly, I appreciate your time and effort in helping fellow Squarespace users out!

Here is my problem: I have added a floating button using custom CSS. I have no experience with coding and followed a template I found on someone's blog. After intuitively tweaking a few things to make the button appear and work, it now only displays upon reloading the page. In other words: it doesn't show upon initially landing on the site. 

The website is: www.jomartinosteopathy.com.au

I'm grateful for any help and suggestions!

Sincerely,

Jo

What is site url?

Good point, I thought it would be somehow visible... 😂

The website is: www.jomartinosteopathy.com.au 

Where is float button? Which code did you add & Where did you add? I tried checking from my browser but don't see any code in Custom CSS box

I used 2 lots of code. One in the page header, another one in the 'Custom CSS' section under 'website tools'.

The page header code is this:

<meta name="robots" content="noindex">
<div id="floating-button">
  <a href="/np-morn"> More appointments here </a>
</div>

The Custom CSS code is this: 

#floating-button {
  position: fixed;
  top: 50%;
  right: 0;
  transform: rotate(90deg) translateX(50%);
  transform-origin: 100% 0;
  z-index: 99999;
}
#floating-button a {
  background: #0E0793;
  color: white;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  font-family: montserrat;
  font-weight: 400;
  letter-spacing: 0.3em;
  padding: 10px 30px;
  border-radius: 0px 0px 10px 10px;
  transition: ease 0.5s !important;
}
#floating-button a:hover {
    padding: 20px 40px;
  background: #2E52FF;
  }
@media screen and (max-width: 768px) {
  #floating-button {
    bottom: 0;
    top: auto;
    transform: none;
    left: 0;
    text-align: center !important;
  }

  #floating-button a {
    padding: 10px 0px;
    border-radius:10px 10px 0px 0px !important;
    width: 100% !important;
  }

}

*/

If you want button appears on all pages, you should use Website Tools > Code Injection > Footer instead Page Header.

Which page you added code to Page Header? I tried finding code in homepage but can't find any

The code should only be in the header for two pages:

1) https://www.jomartinosteopathy.com.au/np-frs

and

2) https://www.jomartinosteopathy.com.au/np-morn

It looks like you havent' added code to Custom CSS yet (or you added to wrong "CSS section"

Don't remove code from your Page Header

Add this code to Custom CSS box (see screenshot below)

#floating-button {
  position: fixed;
  top: 50%;
  right: 0;
  transform: rotate(90deg) translateX(50%);
  transform-origin: 100% 0;
  z-index: 99999;
}
#floating-button a {
  background: #0E0793;
  color: white;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  font-family: montserrat;
  font-weight: 400;
  letter-spacing: 0.3em;
  padding: 10px 30px;
  border-radius: 0px 0px 10px 10px;
  transition: ease 0.5s !important;
}
#floating-button a:hover {
    padding: 20px 40px;
  background: #2E52FF;
  }
@media screen and (max-width: 768px) {
  #floating-button {
    bottom: 0;
    top: auto;
    transform: none;
    left: 0;
    text-align: center !important;
  }

  #floating-button a {
    padding: 10px 0px;
    border-radius:10px 10px 0px 0px !important;
    width: 100% !important;
  }
}

Thank you. I've added the code, however there was already custom code in the section you mentioned I should ad. So, I've deleted the old code (below for your reference) and added yours. The problem persists.

This is what's in 'custom css' now:

/*

.btt {
  color: grey;
  font-weight: bold;
  text-align: center;
  display: block;
}
#block-ccf38b9fa5ecb298c108 {
  border-right: 2px solid #ccc;
}
#block-yui_3_17_2_1_1675821262885_78076 h3{
  color: #F53831;
  font-size: 28px;
 
}
 .Header-nav-item--folder a {
 pointer-events: none;
 }
 .Header-nav-folder-item {
 pointer-events: auto !important;
 }
#floating-button {
  position: fixed;
  top: 50%;
  right: 0;
  transform: rotate(90deg) translateX(50%);
  transform-origin: 100% 0;
  z-index: 99999;
}
#floating-button a {
  background: #0E0793;
  color: white;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  font-family: montserrat;
  font-weight: 400;
  letter-spacing: 0.3em;
  padding: 10px 30px;
  border-radius: 0px 0px 10px 10px;
  transition: ease 0.5s !important;
}
#floating-button a:hover {
    padding: 20px 40px;
  background: #2E52FF;
  }
@media screen and (max-width: 768px) {
  #floating-button {
    bottom: 0;
    top: auto;
    transform: none;
    left: 0;
    text-align: center !important;
  }

  #floating-button a {
    padding: 10px 0px;
    border-radius:10px 10px 0px 0px !important;
    width: 100% !important;
  }
}

*/

And here's the old code: 

#floating-button {
  position: fixed;
  top: 50%;
  right: 0;
  transform: rotate(90deg) translateX(50%);
  transform-origin: 100% 0;
  z-index: 99999;
}
#floating-button a {
  background: #0E0793;
  color: white;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  font-family: montserrat;
  font-weight: 400;
  letter-spacing: 0.3em;
  padding: 10px 30px;
  border-radius: 0px 0px 10px 10px;
  transition: ease 0.5s !important;
}
#floating-button a:hover {
    padding: 20px 40px;
  background: #2E52FF;
  }
@media screen and (max-width: 768px) {
  #floating-button {
    bottom: 0;
    top: auto;
    transform: none;
    left: 0;
    text-align: center !important;
  }

  #floating-button a {
    padding: 10px 0px;
    border-radius:10px 10px 0px 0px !important;
    width: 100% !important;
  }

}

Any other ideas?

Yessss! This worked and I finally have my floating button!
Thanks so much, I'm very, very grateful! =D