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
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;
}
}

 

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 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.84175165_ScreenShot2022-01-20at12_05_03AM.thumb.png.f75e921869c11b72b414db34a2f02ad1.png

Link to comment
  • 0
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.84175165_ScreenShot2022-01-20at12_05_03AM.thumb.png.f75e921869c11b72b414db34a2f02ad1.png

What is 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, 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>

 

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

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 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;
}

 

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

 

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, 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!!

Screen Shot 2022-03-31 at 12.01.34 PM.png

Link to comment
  • 0
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!!

Screen Shot 2022-03-31 at 12.01.34 PM.png

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

  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;
}
Link to comment
  • 0
On 3/31/2022 at 11:12 PM, RollaAgency said:

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

  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?

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

Link to comment
  • 0
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!

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