Custom floating elements
User-friendly floating bar + badge to highlight key info and awards without cluttering the page.
Challenge
The
01/03
At the moment, Squarespace doesn’t have native options to create floating elements.
The designer needed a custom floating bar for key info about their client’s restaurant that wasn’t visually obtrusive, and easily editable.
They also wanted to include an OpenTable badge to highlight their client’s award, but didn’t have the time to figure out how to build it in a way that it could show up on the Homepage at all times – regardless of the main link hovered.
Juniper template (7.0)
Floating info bar only on Homepage
Floating OpenTable badge only on Homepage
Responsive sizes for both elements
The
A floating bar was added to provide quick access to key info like hours and location—without overwhelming the layout.
I also added a floating OpenTable badge to showcase an award, customized to match the site’s style.
Both elements are easy for the designer to edit: icons, links, and text can be swapped in seconds.
The result? Non-intrusive, branded, and fully client-friendly.
Custom elements built with HTML
Designer-friendly info update options
Designer-friendly styling options
