Jump to content

Adding A Sticky Button That appears on all pages and links to a specifc page

Go to solution Solved by Ziggy,

Recommended Posts

I would like to create a sticky button that appears on every page and follows the viewers scroll. I am recreating a website for a client and they would like this feature to be taken from their existing website to the new one. 

The existing website is: www.porthedlanddental.com.au and the sticky button I'm referring to is Financing Options.

I have tried various custom code but haven't had any luck.

The button will need to link to the Finance Page of their website. 

Screen Shot 2023-05-16 at 8.02.17 pm.png

Link to comment
  • Solution

You're welcome to try this code I have, you'll want to tweak the styling to suit your website.

Add this to Header Code Injection:

<html>
  <div id="sticky-button">
  <a href="/finance">Finance</a>
  </div>
</html>

Add this to Custom CSS:

#sticky-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99999;
}
#sticky-button a {
  background: #fff;
  color: black;
  display: inline-block;
  font-size: 14px;
  font-weight:800;
  font-weight: bold;
  text-transform: uppercase;
  font-family: montserrat;
  //writing-mode: vertical-rl;
  padding: 6px 14px;
  margin-left:10px;
  border-radius:2px;
  //border-radius:50px 0px 0px 50px;
  box-shadow: 2px 4px 7px rgba(0,0,0,0.2);
  transition: all ease-in-out 300ms;
  webkit-transition: all ease-in-out 300ms;
  moxkit-transition: all ease-in-out 300ms;
  &:hover {
    background:rgba(255,255,255,0.85);
    box-shadow: 2px 4px 7px rgba(0,0,0,0.4);
  }
}

@media screen and (max-width: 960px) {
  #sticky-button {
    bottom: 0px;
    right:6px;
    top: initial;
    transform: none;
  }
  #sticky-button a {
    writing-mode: initial;
    font-size:3vw;
    margin-left:4px;
    border-radius:4px 4px 0px 0px;
  }
}

 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

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

 Did I help? Buy me a coffee?

Link to comment
  • 4 weeks later...
50 minutes ago, TheRaffCreative said:

where does the destination URL go on this code, please? 

This line in the header code injection:

 <a href="/finance">Finance</a>

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

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

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...
Posted (edited)

Hi @Ziggy
Thanks so much for your help before with the sticky button, it works perfectly. 

Are you able to let me know if I can make the background behind the navigation text ONLY a different colour? I can use the style settings to make the whole navigation different colours but the client specifically wants JUST the background behind the text to be grey, like this screenshot attached.

Screen Shot 2023-06-25 at 3.14.46 pm.png

Would you also know how to add a calendar icon to the buttons? I tried playing around with "font awesome" but i could only get the icon to appear next to the button not within the button itself. Example of clients request attached.

Screen Shot 2023-06-25 at 3.53.07 pm.png

Edited by VisualCollective
Link to comment
  • 4 months later...

Hi I am also trying to add a button to my custom header for a landing page. 

URL https://lacunahr-dev.squarespace.com/gho-org-design-session

I want the button to sit on the right hand and say "APPLY FOR YOUR FREE ORGANISATION DESIGN SESSION" and for the click to take you to the URL https://calendly.com/lacuna-hr/organisation-design-session-w-milena-serafimovski 

How would I tweak the above code to incorporate this? I can figure out how to customise my colours from the above but unsure on the rest. 

thanks!

Link to comment
On 11/13/2023 at 6:35 PM, LacunaHR said:

Hi I am also trying to add a button to my custom header for a landing page. 

URL https://lacunahr-dev.squarespace.com/gho-org-design-session

I want the button to sit on the right hand and say "APPLY FOR YOUR FREE ORGANISATION DESIGN SESSION" and for the click to take you to the URL https://calendly.com/lacuna-hr/organisation-design-session-w-milena-serafimovski 

How would I tweak the above code to incorporate this? I can figure out how to customise my colours from the above but unsure on the rest. 

thanks!

Add to Landing Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
$('<a class="btn btn--border theme-btn--primary-inverse" href="https://calendly.com/lacuna-hr/organisation-design-session-w-milena-serafimovski" target="_blank">APPLY FOR YOUR FREE ORGANISATION DESIGN SESSION</a>').appendTo('div.header-title-nav-wrapper');
});
</script>
<style>
  a.btn {
    background-color: #e2725b;
}
</style>

image.thumb.png.4bd04fabd9e48149db43b8d14bd3f7c2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.