Jump to content

Hide floating button on a particular page

Recommended Posts

Hi

I have added a floating button on my website using the code below, now I want to hide this on a particular page, how do I do it? Thanks in advance!

<!-- HTML FOR BUTTON -->
<div id="book-me">
  <a href="/specialoffer"> ★ GAP free Special Offer! </a>
</div>
/*STYLES FOR FLOATING BUTTON*/
#book-me {
  position: fixed;
  top: 50%;
  left: 0;
  transform: rotate(270deg) translateX(-50%);
  transform-origin: 0% 0;
  z-index: 99999;
}
#book-me a {
  background: #8EC63F;
  color: black;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: futura-pt;
  padding: 10px 30px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  letter-spacing: 2px
}
@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: auto;
    transform: none;
  }
  #book-me a {
    padding: 10px 30px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
}

 

Link to comment

Hello!

The simplest way is to nest this code inside the page-IDs that you want it to appear and omit the page-ID where you don't want it to appear?

For that page where you want to hide it, you might want to set "display:none;" to be safe as well -- all depends on how you inserted the code.

 

Best,

Dan

Link to comment

Edit page (page where you want to hide it) > Add a Code Block at bottom of page >> Paste this code into Code Block

<style>
  #book-me {display: none !important;}
</style>

(All Plans, include Personal Plan, support Code Block)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 6/1/2022 at 1:28 PM, tuanphan said:

Edit page (page where you want to hide it) > Add a Code Block at bottom of page >> Paste this code into Code Block

<style>
  #book-me {display: none !important;}
</style>

(All Plans, include Personal Plan, support Code Block)

Hi @tuanphan

Thank you so much, this works perfectly! My apologies for the delayed response.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.