floating button / navigation

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

18 hours ago, Dave909 said:

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

 

To make categories sticky on scroll, add this to DESIGN > CUSTOM CSS

/* Shop categories sticky */
@media screen and (min-width:641px) {
.ProductList-filter {
    position: sticky;
    position: -webkit-sticky;
    top: 5px;
}
}

On 5/14/2020 at 9:08 AM, tuanphan said:

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>

 

@tuanphan Greetings! I'm attempting to use your code on my SS website but I'm having trouble getting the text box to hover over every section. It only seems to be present in the footer. Any assistance would be much appreciated.

On 1/20/2022 at 12:08 PM, kbentonbrooks203 said:

@tuanphan Greetings! I'm attempting to use your code on my SS website but I'm having trouble getting the text box to hover over every section. It only seems to be present in the footer. Any assistance would be much appreciated.

What is site url?

@tuanphan Thank you for getting back to me. The Url is : https://bumblebee-plum-rbr7.squarespace.com/ 

18 hours ago, kbentonbrooks203 said:

@tuanphan Thank you for getting back to me. The Url is : https://bumblebee-plum-rbr7.squarespace.com/ 

Add this code under

<style>
  .t-button {
    z-index: 99999;
}
</style>

4 hours ago, tuanphan said:

<style>
  .t-button {
    z-index: 99999;
}
</style>

 @tuanphanYou're nothing short of amazing. I appreciate your assistance.

Hi @tuanphan

I am trying to create a floating button on every page that follows the scroller from top to bottom.

I have tried to code in the chats, but it seems to disappear underneath certain blocks.

Also, how do I link and edit the button?

On 2/25/2022 at 6:02 AM, AMBERSIS said:

Hi @tuanphan

I am trying to create a floating button on every page that follows the scroller from top to bottom.

I have tried to code in the chats, but it seems to disappear underneath certain blocks.

Also, how do I link and edit the button?

Can you add the code & share link to your site? We can check easier

@tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com

The button pops up on the right hand side once you get to the Footer.

We want it to be visible on the right hand side the entire time, from top to bottom.

We want the button on every page on the right hand side when you scroll.

Thank you so much!

On 2/28/2022 at 10:31 AM, AMBERSIS said:

@tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com

The button pops up on the right hand side once you get to the Footer.

We want it to be visible on the right hand side the entire time, from top to bottom.

We want the button on every page on the right hand side when you scroll.

Thank you so much!

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Show button alltime */
.t-button {
    z-index: 123456789 !important;
}

@tuanphan Thank you so much for your help!!! Works perfect! 😁

Hi,

Thanks for sharing such great useful code. One question though. Is there a way to ad two buttons, one on the right and another on the left ? 

Thank you,

A.

On 3/24/2022 at 2:21 PM, Aygen said:

Hi,

Thanks for sharing such great useful code. One question though. Is there a way to ad two buttons, one on the right and another on the left ? 

Thank you,

A.

Add this code

<a href="https://beaverhero.com" class="t-button">Button Text</a>
<a href="https://beaverhero.com" class="t-button button2">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;
  }
  .button2 {
  right: unset !important;
    left: 0;
  }
</style>

Hi, i'm trying to set a call to action button/floating button on the right side of my webpage, i followed tuanphan's steps but it's not working, when i hit the save button it appears for a second, but it immediately disappeared. i'm sending the screenshot to see if anyone can help me out here, thanks!!

3 minutes ago, RollaAgency said:

Hi, i'm trying to set a call to action button/floating button on the right side of my webpage, i followed tuanphan's steps but it's not working, when i hit the save button it appears for a second, but it immediately disappeared. i'm sending the screenshot to see if anyone can help me out here, thanks!!

i just Found my answer this works awesome! thanks!!!

/* Show button alltime */
.t-button {
    z-index: 123456789 !important;
}

On 3/31/2022 at 11:12 PM, RollaAgency said:

i just Found my answer this works awesome! thanks!!!

 

Posted March 3

  On 2/27/2022 at 10:31 PM, AMBERSIS said:

@tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com

The button pops up on the right hand side once you get to the Footer.

We want it to be visible on the right hand side the entire time, from top to bottom.

We want the button on every page on the right hand side when you scroll.

Thank you so much!

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Show button alltime */
.t-button {
    z-index: 123456789 !important;
}

Hi,

You mean make float button appear on bottom right corner?

@tuanphan I hesitate to ask you any more questions because you are so lovely in answering all of our queries - for free! THANK YOU SO MUCH.

I have used the code and it works brilliantly - thank you (talkingheads.co.uk/seotranslation). However on the button, the link is only active at the right hand side of the button - could the link cover the whole button?

Thanks!

1 hour ago, cannonball said:

@tuanphan I hesitate to ask you any more questions because you are so lovely in answering all of our queries - for free! THANK YOU SO MUCH.

I have used the code and it works brilliantly - thank you (talkingheads.co.uk/seotranslation). However on the button, the link is only active at the right hand side of the button - could the link cover the whole button?

Thanks!

Hi Yes you can fix it by adding the following code to DESIGN>CUSTOM CSS

.t-button {
    z-index: 9 !Important;
}

Please do mark it solved if it works.

On 5/10/2022 at 3:08 PM, humxahafeex said:

Hi Yes you can fix it by adding the following code to DESIGN>CUSTOM CSS

.t-button {
    z-index: 9 !Important;
}

Please do mark it solved if it works.

Thanks so much!

@tuanphanI have a question about the animation of the button on my page, I have added the button as per the code you have provided and it worked great. If it is possible I would like the button to reveal further down the page after our Book now button in the header is out of view. https://www.katmaifishingguides.com/

On 10/14/2022 at 3:46 AM, Sbenjamin said:

@tuanphanI have a question about the animation of the button on my page, I have added the button as per the code you have provided and it worked great. If it is possible I would like the button to reveal further down the page after our Book now button in the header is out of view. https://www.katmaifishingguides.com/

Hi,

I don't see Book now button

On 10/16/2022 at 9:21 PM, tuanphan said:

Hi,

I don't see Book now button

It should be there now, lower right. It reads "book a trip"

On 10/19/2022 at 7:18 PM, Sbenjamin said:

It should be there now, lower right. It reads "book a trip"

You want

Scroll down, when users can't see book a trip on header, the float book a trip will appear?

On 1/16/2022 at 10:26 PM, tuanphan said:

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

Hi, I used this on my website but the links are not active. Does this no longer work? Also does not show up on mobile.

jouleseventeen.com/honey