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 
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
  • 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 
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
  • 3 weeks later...

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hi!

I'm trying to achieve a somewhat similar result, but with an image.

It is mandatory for this business to show an image specified by the government in every desktop and mobile page. The image should be visible at all times at the right bottom corner of the website.

I have tried to add this custom css code:

.fe-block-yui_3_17_2_1_1690300738473_3201 {
    position: sticky;
    bottom: 0;
  }

But it doesn't do anything...

Can You please help me to achieve this?

The website: https://www.zsaluflex.hu

The image:
image.thumb.png.e961a61326fcf2235c69ff36b6f0ad93.png

Thank you so much!

 

Link to comment

Hi!

I'm trying to achieve a somewhat similar result, but with an image.

It is mandatory for this business to show an image specified by the government in every desktop and mobile page. The image should be visible at all times at the right bottom corner of the website.

I have tried to add this custom css code:

.fe-block-yui_3_17_2_1_1690300738473_3201 {
    position: sticky;
    bottom: 0;
  }

But it doesn't do anything...

Can You please help me to achieve this?

The website: https://www.zsaluflex.hu

The image:
image.thumb.png.e961a61326fcf2235c69ff36b6f0ad93.png

Thank you so much!

 

Link to comment
29 minutes ago, DanielV said:

It is mandatory for this business to show an image...at the right bottom corner of the website.

It looks like you've resolved this by styling your image, with .tp-sticky-img class, as follows:

img.tp-sticky-img {
  position: fixed;
  top: 100%;
  left: 100%;
  transform: translate(-99%,-99%);
  z-index: 999;
  }

You could also have used this:

img.tp-sticky-img {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
}

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 4 weeks later...

Hi

Im looking to put a floating sticky note on all website pages with a specific picture, that will take the site user to the contact us page or services we offer page, i'm a little new to website building, your patience with me is greatly appreciated

 

Thank you

Edited by Yogi-Chris
Link to comment
On 1/17/2024 at 10:59 PM, Yogi-Chris said:

Hi

Im looking to put a sticky note on all website pages with a specific picture, that will take the site user to the contact us page or services we offer page, i'm a little new to website building, your patience with me is greatly appreciated

 

Thanks you

You can use code in second comment

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

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.