How to Create a Floating Button or Navigation in Squarespace 7.1

Written By Walid Hasan

Floating buttons or sticky navigation menus on websites are a design element that makes it easier for users to click on an important button, no matter where they are in the viewport on the website.

Floating elements such as Back to Top button, Floating Contact us button, Floating social media sharing buttons, Floating Advertisements, and many more help you add a great layer of interaction and user lively and feel professional to website users.

  • In Squarespace 7,1, you can easily add the floating buttons or mini navigation with very basic HTML and CSS.

  • No long-winded plugins or third-party tools!

Create a Floating Button Step-by-Step Guide

Step 1: Add the Floating Button HTML

Go to:
Settings > Advanced > Code Injection > Footer
and paste this simple button:

<!-- Floating Button -->

Copied!

<a href="#top" id="floating-button" aria-label="Scroll to Top">↑</a>

✓ This button will float on the page and link to the top of your website.
✓ You can change href="#top" to anything — for example, a link to your Contact Section (href="#contact") or an external page.

Step 2: Style the Floating Button (CSS)

Now go to:
Design > Custom CSS
And paste this CSS:

Copied!

/* Floating Button Styling */
#floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #333333;
  color: #ffffff;
  font-size: 22px;
  padding: 14px 18px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: all 0.3s ease;
}
/* Hover Effect */
#floating-button: hover {
  background-color: #ff6600;
  transform: scale(1.1);
}
/* Responsive Size Adjustment */
@media (max-width: 600px) {
  #floating-button {
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
    font-size: 18px;
  }
}

This CSS:

  • Fixes the button at the bottom right corner of the screen,

  • Adds a smooth hover effect (color change + scaling),

  • Make sure the button is mobile-responsive.

Step 3: (Optional) Add Smooth Scroll Behavior

If you want the button to smoothly scroll to the top instead of jumping instantly,
Add this extra script inside the Footer Code Injection:

Copied!

<script>
document.addEventListener("DOMContentLoaded", function() {
  const button = document.getElementById('floating-button');
  if (button) {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
});
</script>

Now, when users click, the page scrolls smoothly modern, elegant UX.

Optional: Create a Floating Navigation with Multiple Buttons

Want multiple floating icons (like WhatsApp, Messenger, Call Us)?

Step 1: Add the Navigation with Multiple Buttons HTML

Go to:
Settings > Advanced > Code Injection > Footer
and paste this simple button:

Copied!

<div id="floating-nav">
  <a href="/" class="floating-link"> </a>
  <a href="telto: (555)555-5555" class="floating-link"> </a>
  <a href="mailto: email@example.com" class="floating-link"> </a>
</div>

Step 2: Style the Navigation with Multiple Buttons (CSS)

Now go to:
Design > Custom CSS
Paste this CSS:

Copied!

/* Floating Navigation Container */
#floating-nav {
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999999;
}
/* Floating Navigation Buttons */
.floating-link {
  background-color: #333333;
  color: #ffffff;
  font-size: 18px;
  padding: 10px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
/* Hover Effect */
.floating-link:hover {
  background-color: #ddd;
  transform: scale(1.1);
}
/* Mobile Responsive */
@media (max-width: 600px) {
  #floating-nav {
    bottom: 20px;
    right: 20px;
  }
}

Each icon becomes a button linking to different sections of your site!

Quick Setup Summary

Step Action
1️⃣ Add HTML code inside the Footer Code Injection
2️⃣ Add CSS code inside Design > Custom CSS
3️⃣ (Optional) Add JavaScript for smooth scrolling
4️⃣ Customize colors, icons, and positions as needed
5️⃣ Save and refresh to test!

Super lightweight, no slowdowns, fully mobile responsive.

Final Result

After setting this up:

  • The floating button or floating navigation will be pinned and visible while the user is scrolling.

  • It will also look good on mobile with no glitches.”

  • Your website will seem more professional, interactive, and user-friendly.

Just like modern top brands' websites!

Pro Tips:

Tip Why
Use simple icons Better for mobile and quick recognition
Match button color to your brand Helps with visual consistency
Avoid too many floating buttons 1–3 floating links are ideal for clean UX
Always test on mobile devices Floating elements should never block important content

✓ Keep it minimal and elegant!

Conclusion

  • We have now shown you how to make a floating button or a floating navigation menu on Squarespace 7.1

  • Clean, modern, mobile responsive, and enhances the interactivity of your site.

  • Best of all: No plugins. No heavy apps. Nothing but nice clean HTML + CSS + a smidgen of JavaScript.

  • Floating Elements You’re familiar with how floating elements can provide a quick and easy method to enhance the design & user experience.

Frequently Asked Questions

1. Will this floating button work on all Squarespace 7.1 templates?
 Yes! This works on all Squarespace 7.1 templates because it uses universal HTML and CSS. Just make sure your site allows Code Injection (Business plan or higher).

2. Can I use icons inside the floating buttons instead of text?
Absolutely. Replace the ↑ symbol with an icon using Font Awesome or an <img> tag:

Copied!

<a href="#top" id="floating-button"><i class="fa fa-arrow-up"></i></a>

3. How do I change the position of the floating button?
Update these lines in the CSS:

bottom: 30px;

right: 30px;

You can move it to the left, top, or center by adjusting the values or adding left: and removing right:.

4. Will this slow down my website?
No. The solution is lightweight, using only HTML/CSS and a small JavaScript snippet. It won’t affect your site speed or SEO.

5. Can I use it to link to external pages or phone numbers?
Yes! You can link to external URLs (href="https://example.com"), phone numbers (tel:), emails (mailto:), or internal sections (#section-id).

6. Why isn’t the button showing up on my site?
 Common reasons:

  • You're on a Personal plan (no Code Injection access).

  • You forgot to paste the CSS in Design > Custom CSS.

  • The ID or class name doesn’t match the CSS selector.

7. Is it mobile responsive?
Yes! The provided CSS includes media queries to adjust padding and size on mobile screens.

8. Can I add animation when the buttons appear on scroll?
Yes! You can enhance it using @keyframes, or load GSAP or AOS libraries if needed — but that’s optional and best for advanced users.

Walid Hasan

I'm a Professional Web developer and Certified Squarespace Expert. I have designed 1500+ Squarespace websites in the last 10 years for my clients all over the world with 100% satisfaction. I'm able to develop websites and custom modules with a high level of complexity.

If you need a website for your business, just reach out to me. We'll schedule a call to discuss this further :)

https://www.squareko.com/
Previous

How to Replace 'Required' Text with Red Asterisk in Squarespace 7.1 Forms
Next

Dynamic Hover Effects to Portfolio Page in Squarespace 7.1