floating button / navigation

On 5/12/2023 at 12:58 AM, amleto1990 said:

Hi, I used this on my website but the links are not active. Does this no longer work? Also does not show up on mobile.

jouleseventeen.com/honey

Where did you add the code?

I can't get this code to work for me.  Can you help?  Here is my website: https://thecleanwaterexpert.com/

On 6/6/2023 at 4:02 AM, Mary-Grace said:

I can't get this code to work for me.  Can you help?  Here is my website: https://thecleanwaterexpert.com/

I see you solved with CSS code?

#book-me {
    position: fixed;
    bottom: 27px;
    left: 20px;
    z-index: 99999;
}

Hi,

Do you think the above methods could work with this plugin...

https://www.sqspthemes.com/plugins/p/ultimate-squarespace-lightbox-plugin

To be clear, I want a side button that opens an iframe in a popup using the above plugin

Thanks

Greg

On 3/5/2024 at 1:45 AM, HillsWebDesign said:

Hi,

Do you think the above methods could work with this plugin...

https://www.sqspthemes.com/plugins/p/ultimate-squarespace-lightbox-plugin

To be clear, I want a side button that opens an iframe in a popup using the above plugin

 

Thanks

Greg

Hi,

It should work with Lightbox Plugin. I used to help some members with same buttons

Or if you need a simple popup, we can do this without using plugin

Let me know if you still need help

On 5/13/2020 at 9:42 AM, tuanphan said:

Like this? or can you describe in detail/share link to an example?

@tuanphan How do you make that floating button group?

On 8/21/2024 at 10:11 PM, HHSystems said:

@tuanphan How do you make that floating button group?

I don't save code on this site. You want to achieve same or what should it look like?

@tuanphan I would like to achieve something similar. 

I am currently working with on floating button using code code from earlier in the post but want a couple more.
3 buttons floating in a group vertically with text and potentially icons.  

On 8/23/2024 at 8:07 PM, HHSystems said:

@tuanphan I would like to achieve something similar. 

I am currently working with on floating button using code code from earlier in the post but want a couple more.
3 buttons floating in a group vertically with text and potentially icons.  

Text only or text + icon? If icons, you want to use your own image icon or? If icons, you can also choose font icons here: (choose free icons)

https://fontawesome.com/icons

On 8/25/2024 at 12:09 AM, tuanphan said:

Text only or text + icon? If icons, you want to use your own image icon or? If icons, you can also choose font icons here: (choose free icons)

https://fontawesome.com/icons

Text and Icons.
"First time" no icon.
https://fontawesome.com/icons/scroll?f=classic&s=solid
https://fontawesome.com/icons/building?f=classic&s=solid

On 8/26/2024 at 10:41 PM, HHSystems said:

Text and Icons.
"First time" no icon.
https://fontawesome.com/icons/scroll?f=classic&s=solid
https://fontawesome.com/icons/building?f=classic&s=solid

You can use this code to Website Tools > Code Injection > Footer

<div class="float-bar">
  <a href="/about">First time with us</a>
  <a href="/waiver"><i class="fa-solid fa-scroll"></i> Waiver</a>
  <a href="/facility"><i class="fa-solid fa-building"></i> Facility</a>
</div>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
<style>
  div.float-bar {
  background-color: #f75900;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  min-height: 200px;
}
div.float-bar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}
</style>

Replace these with real urls on your site