Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

floating button / navigation


isawize

Question

Recommended Posts

  • 0
34 minutes ago, isawize said:

hi everyone,

I'm looking for a way to create a floating button (linked to an url) on the right side of a page, the button remaining from to bottom while scrolling...
thanks  adance for your help

 

 

Hi , It's quite easy , Wil you please share your website Link so We can provide you with the code 🙂

Link to comment
  • 0
22 hours ago, isawize said:

exactly ! I just need 1 icon tittled "book an appointment" (prendre rendez-vous in french)

Add this to Home > Settings > Advanced > Code Injection > Footer

<a href="https://beaverhero.com" class="t-button">Button Text</a>

and add this to Code Injection > Header

<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

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
  • 0
5 hours ago, isawize said:

ok thank you tuanphan ! just for my information, what does this stand for ?

it is button link, you replace with your site url ✌️

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
  • 0
18 hours ago, lula344 said:

Is it possible to set this up on just one page rather than the whole website?

Edit that page >> Add a Code Block (at bottom of page) >> Paste this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

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
  • 0
On 7/27/2021 at 11:01 AM, tuanphan said:

Edit that page >> Add a Code Block (at bottom of page) >> Paste this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
</style>

 

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

Link to comment
  • 0
2 minutes ago, Coggleton1 said:

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

@tuanphan and is there a way to make the link clicked open in a new window? All help greatly appreciated!

Link to comment
  • 0
8 hours ago, Coggleton1 said:

@tuanphan and is there a way to make the link clicked open in a new window? All help greatly appreciated!

To make link open new window, edit this code

Quote
<a href="https://beaverhero.com" class="t-button">Button Text</a>

to this

Quote
<a href="https://beaverhero.com" class="t-button" target="_blank">Button Text</a>

to hide button on one page, add this to Page Header

<style>
  a.t-button {display: none !important;}
</style>

But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

One on top, second on bottom??

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
  • 0
On 8/14/2021 at 8:05 AM, Coggleton1 said:

Hey @tuanphan, the above code is great and just what I'm looking for to appear on certain pages of a website I'm building. But I need two separate buttons one on top of the other on the page. Is there a way to adapt the code to create two buttons?

thank you @tuanphan!! this was a lifesaver.  I have the single button looking good, How can I layer multiple buttons?  I want to list 6 dates and times to link to for ticket purchases.  thanks!!

Screen Shot 2021-10-07 at 9.36.26 AM.png

Link to comment
  • 0
7 hours ago, Meg28607 said:

thank you @tuanphan!! this was a lifesaver.  I have the single button looking good, How can I layer multiple buttons?  I want to list 6 dates and times to link to for ticket purchases.  thanks!!

Screen Shot 2021-10-07 at 9.36.26 AM.png

You mean 7 buttons or 3 buttons

I just sent to your email

3 buttons, use this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<a href="https://beaverhero.com" class="t-button button2">Button Text 2 </a>
<a href="https://beaverhero.com" class="t-button button3">Button Text 3</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
z-index: 9999;
  }
/* button 2 */
.button2 {
    top: calc(~"50% - 70px");
}
/* button 3 */
.button3 {
    top: calc(~"50% - 140px");
}
</style>

 

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
  • 0

Hi @tuanphan it's so nice of you to provide this code for people, very helpful. I want to use it to display a Call button and a Whatsapp button, the Whatsapp button is working, however I can't get the click to call to work. I'm using this code for it, what am I doing wrong?

<a href=“tel:+61285988504” class="t-button">Call Us</a>

Also and I hope this isn't asking too much, is there a way to use an icon instead of text, as on the mobile the buttons take up a lot of real estate.

Thank you so much in advance!

Link to comment
  • 0
On 11/26/2021 at 4:47 PM, LightLetterAus said:

Hi @tuanphan it's so nice of you to provide this code for people, very helpful. I want to use it to display a Call button and a Whatsapp button, the Whatsapp button is working, however I can't get the click to call to work. I'm using this code for it, what am I doing wrong?

<a href=“tel:+61285988504” class="t-button">Call Us</a>

Also and I hope this isn't asking too much, is there a way to use an icon instead of text, as on the mobile the buttons take up a lot of real estate.

Thank you so much in advance!

Not sure whey, but your " " symbol is invalid. Copy this new code 

<a href="tel:+61285988504" class="t-button">Call Us</a>

With icon, if you share link to your site, we can test & give the icon code easier

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
  • 0
21 hours ago, LightLetterAus said:

Hi @tuanphan, thanks for that. I've updated the code with yours but I still can't see the call us button, strange.

Our site is https://lightletter.com.au/ .

I have hosted a whatsapp icon on squarespace, as I thought I'd have to add the image link somewhere. It's -

whatsapp-icon3-150px.png

#1. Add this to Design > Custom CSS

/* call us overlap whatsapp */
a.t-button.button2 {
    top: calc(~"50% - 70px") !important;
}

#2. To change whatsapp text to icon, add this CSS

/* whatsapp */
a.t-button.button2 {
    background-image: url(https://static1.squarespace.com/static/5e92bd3b9d0f316bec63924e/t/61a0b21beff3f125623552e8/1637921307092/whatsapp-icon3-150px.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    color: transparent;
    background-position: right;
    background-color: transparent !important;
}

image.thumb.png.dbbade12722a9c7ebc53254ceab76d2b.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
  • 0

Hello @tuanphan

I also tried your code, many thanks for that. 2 questions about it:

1) could this floating button(s) also only appear on specific pages?

2) if now, is it possible to deactivate it on mobile devices?

Many thanks for your help and Greetings, Dave

Link to comment
  • 0
On 1/8/2022 at 8:07 PM, Dave909 said:

Hello @tuanphan

I also tried your code, many thanks for that. 2 questions about it:

1) could this floating button(s) also only appear on specific pages?

2) if now, is it possible to deactivate it on mobile devices?

Many thanks for your help and Greetings, Dave

#1. If you use this code, it will appear on page where you added the code

#2. If you use #1 code, use this full code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

 

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
  • 0
On 1/10/2022 at 4:18 AM, tuanphan said:

#1. If you use this code, it will appear on page where you added the code

#2. If you use #1 code, use this full code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

 

Thanks, that works - what if iI want to use like 5 buttons underneath each other?

I saw your code up in this topic but on my side, there always only appeared 1 button...

Link to comment
  • 0
On 1/15/2022 at 9:52 PM, Dave909 said:

Thanks, that works - what if iI want to use like 5 buttons underneath each other?

I saw your code up in this topic but on my side, there always only appeared 1 button...

With 5 buttons, try this code

<a href="https://beaverhero.com" class="t-button">Button Text 1</a>
<a href="https://beaverhero.com" class="t-button button2">Button Text 2</a>
<a href="https://beaverhero.com" class="t-button button3">Button Text 3</a>
<a href="https://beaverhero.com" class="t-button button4">Button Text 4</a>
<a href="https://beaverhero.com" class="t-button button5">Button Text 5</a>
<style>
  .t-button {
  	display: inline-block;
    background: green;
    color: white;
    padding: 1em 2em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: fixed;
    top: 50%;
    right: 0;
  }
  .button2 {
  		top: calc(50% + 50px);
  }
  .button3 {
  		top: calc(50% + 100px);
  }
   .button4 {
  		top: calc(50% + 150px);
  }
   .button5 {
  		top: calc(50% + 200px);
  }
  @media screen and (max-width:767px) {
    .t-button {display: none !important;}
  }
</style>

If it doesn't work, please share link to your site

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
  • 0

@tuanphan thanks for that code. If I insert it on a single page like home, they appear - so that works. If I insert it on shop page (settings - header code) they don't appear.

To understand what I want to do: I want that users can navigate more easily on our shop. If you scroll in our shop (Soft4Home - günstig & zuverlässig! — Soft4Home) you will see that categories are not so easy to find, and they are not sticking while I'm scrolling. So that's why I wanted to have some buttons for the most-used categories floating. But also I will use your code for desktop-view to show some buttons which will link to most-used categories.

Thanks and best regards.

 

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...