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

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. 

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

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>

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.

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.

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!

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>

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:

Thank you so much!

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:

Thank you so much!

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  ⬇️

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

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

Hi

How would I be able to add a sticky newsletter button like the one below to my site?

I would like to be able to have it visible on every page as well. 

Thank you!

On 7/6/2024 at 2:44 AM, dlake said:

Hi

How would I be able to add a sticky newsletter button like the one below to my site?

I would like to be able to have it visible on every page as well. 

Thank you!

 

Screen Recording 2024-07-05 at 3.41.30 PM.mov

You can follow this guide