Floating Buttons to Squarespace 7.1

I was wondering if anyone had experience with adding a floating button to Squarespace 7.1? I want this to be available when someone begins to scroll on a page. So far, all of the code that I have found is for older versions of Squarespace. Thanks!

This is great and works well, but it places the floating button on very page.  Is there a way to place it on one specific page only?

Thanks,  Gene

7 hours ago, GeneCWayne said:

Is there a way to place it on one specific page only?

Yes! Instead of adding the code (in step 1) to the site-wide code injection panel, you can add it to the per-page code injection panel instead.

Works Great!  Thanks so much.

On 1/6/2023 at 8:38 PM, paul2009 said:

If it helps, I produced a guide for adding a floating button to mobile devices:
Mobile CTA footer for Squarespace 7.1.⬇️

Awesome!

Hi @paul2009. Thanks for sharing the code!

Is there a chance to bring the floating buttons underneath the opened menu (burger menu on mobile)? At the moment the buttons are above the sqsp-header-button.

Best! Jon

2 hours ago, JonJonJJ said:

Is there a chance to bring the floating buttons underneath the opened menu (burger menu on mobile)?

Hey Jon

In the Custom CSS (around line 31), reduce the z-index to 10 (instead of 10000) and this should do the trick 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

12 hours ago, paul2009 said:

Hey Jon

In the Custom CSS (around line 31), reduce the z-index to 10 (instead of 10000) and this should do the trick 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Great! Thank you so much for your feedback! 

Hello, thanks for providing this code for 7.1! I spent a dumb amount of time trying to make older code work without realizing. 

I've been trying to create floating navigation buttons for my membersite, one on the left and one on the right, with different icons on each page. I was able to get this code to work to create a Book Now/CTA button but couldn't figure out how to replace the button for an icon (specifically a hosted image w/ URL), which I was able to do once on a page before 7.1 .

Would love to know if you have any suggestions.

Much appreciated!

2 hours ago, AlexandraHB said:

I was able to get this code to work to create a Book Now/CTA button but couldn't figure out how to replace the button for an icon

Please provide some more details so that I can take a look.  A link to the page/site will help as well as a link to the icon and, ideally, a mock-up of what you want to achieve. 

On 10/1/2023 at 2:53 AM, paul2009 said:

Please provide some more details so that I can take a look.  A link to the page/site will help as well as a link to the icon and, ideally, a mock-up of what you want to achieve. 

Hey Paul,

Thanks for the quick reply! 

Website is paywalled, so use code: PAUL2009

http://www.honoredbody.com/the-center

I'm trying to create "Trail Guides"—button links in the form of icons that look like wooden trail markers and that float when visitors scroll (one on the left and one on the right hand side of the page)—for folks to be able to navigate to different pages (the different locations).  These icons would be switched out on each page to give the illusion that you are "walking around" the "property," and I think I understand that this can be done by adding code to each page individually, and just switching out the image links. Is that correct?

For this page I have linked, it would be these icons specifically. 

The Library(left facing)- gdurl.com/63Ui

The Kitchen (right facing)- gdurl.com/yS8Z

And as a mock up: