Jump to content

Floating button

Recommended Posts

Hi - I tried putting in a custom code block to make a button that floats (stays fixed when scrolling) at the top left of the page that takes you back to the previous page (of all products), on certain product pages. I adapted a code I found but the button still disappears behind picture blocks. Can anyone help?

Link to comment
  • Replies 8
  • Views 833
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

You need to have this code block as far down the page as possible, place it at the bottom of the last section if you want it just on one page, or at the bottom of the footer if you want it on every page. This will solve the z-index issue without needing any other code.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You were clear, and it sounds like you did the best thing, is the code block at the end on of the page in the mobile layout too?

Can you share your website URL and the page this is on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi, sure. I've no skills or understanding of code really, just found one on a forum and copied and edited it as best I could... beyond the 'disappearing behind the image' issue, there's a few things I'd love to know how to change on it - namely, I'd like it to match the style of the other buttons on the side - so dark borders, off-white background, turns to dark background [I have the relevant colour codes and white text when hovered on. I also want to change the position so it's a little further to the right but I think I know how to do that.

 

The page I am experimenting on is not live but I have just enabled it so you can see - it's not linked on our website (it's actually an old deleted page). Website is www.heartwoodsaunas.com, but you can only find the page from this URL: https://www.heartwoodsaunas.com/aire-old

Link to comment

I've adjusted and commented in the CSS for the button here:

.t-button {
    display: inline-block;
    position: fixed;
    z-index: 9999 !important;
    background: #fff; /* button background */
    color: #222; /* text colour */
    padding: 13px 26px; /* padding */
    border:2px solid #222; /* border */
    border-radius: 3px; /* border radius */
    top: 35%; /* vertical position */
    left: 10px; /* left spacing */
    transition:ease-in-out 300ms;
  &:hover {
    background: #222; /* hover background colour */
    color:#fff; /* hover text colour */
}

Let me know how you get on with this.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

... Also, I did try to add the < symbol as a 'back' indicator using the code for the symbol, but it positioned it on the same line as the text, like this  < back - is there a way to bring it down so the arrow is positioned lower, centered to the text rather than on the same line?

 

Link to comment

Try adding these to the CSS:

font-family: futura-pt;  /* font */
font-weight: 400; /* weight */
font-size: 10px;
letter-spacing: .02em;
text-transform: uppercase;  /* Uppercase */

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.