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

Adding a floating contact-button on the Brine?


LoveMoves

Question

Recommended Posts

  • 0
On 7/15/2021 at 4:30 AM, P-Wolf said:

This one has worked out for me, and I was able to modify it towards my needs, but I'm just after one more thing. Can we make it hide in some degree towards the right side when we start scrolling, and then pop back out when someone hovers over it with the cursor? Or is it asking too much? 😄

Thanks for your answers!

Hi. Can you share link to your site? We can check it again easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/10/2019 at 9:30 PM, LoveMoves said:

I am looking for something similar to this: https://www.tsiapparel.com/ If possible I would like to link it to a phone-number. I am a beginner with HTML and I am so thankful for every help!

Do you need to fix these?

Site URL – https://www.tsiapparel.com/

1. (Mobile/Tablet – Homepage) Scroll bar at the bottom of page.

https://www.tsiapparel.com/

tsiapparel.com-01-min.png

2. (Mobile – Footer) Change the position of the email icon with the text “Want to write to us? Or share your design files?”?

https://www.tsiapparel.com/

tsiapparel.com-02-min.png

3. (Mobile) Add button Back to top?

https://www.tsiapparel.com/about/uniform-company-profile

tsiapparel.com-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

@GooseGuy Hi. Do you need to fix these?

Site URL – https://www.redflagspgh.org/

1. (Mobile – Menu) Reduce space between Statistics and Donate?

https://www.redflagspgh.org/about

redflagspgh.org-01-min.png

2. (Desktop – Resources) Reduce space?

https://www.redflagspgh.org/resources

redflagspgh.org-02-min.png

3. (Tablet – Header) Menu is cut into 3 lines.

https://www.redflagspgh.org/about

redflagspgh.org-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/16/2021 at 7:50 AM, tuanphan said:

Hi. Can you share link to your site? We can check it again easier

It isn't public yet. We're working on a new business, but we're about to finalize it in a few days.
We've tested the floating button in multiple places around our page, but it doesn't work well with the actual design. We love to have another question, to find the best way for our trouble.

So what we have is two unlinked home pages. And what we really like to do, is to have one button on the right side of the header, but instead of a static button, we need it to change text and pointing direction depending on which landing you're on.

So we want the button direct to the "Business Home Page" when you're on the "Individual Home Page" and vice-versa. I've attached some photos of the situation we're facing with. Hope that helps understanding my problem.

Thanks for your awesome help!

button.png

pages.png

Link to comment
  • 0
3 hours ago, P-Wolf said:

It isn't public yet. We're working on a new business, but we're about to finalize it in a few days.
We've tested the floating button in multiple places around our page, but it doesn't work well with the actual design. We love to have another question, to find the best way for our trouble.

So what we have is two unlinked home pages. And what we really like to do, is to have one button on the right side of the header, but instead of a static button, we need it to change text and pointing direction depending on which landing you're on.

So we want the button direct to the "Business Home Page" when you're on the "Individual Home Page" and vice-versa. I've attached some photos of the situation we're facing with. Hope that helps understanding my problem.

Thanks for your awesome help!

button.png

pages.png

If your site is trial/private, you can setup password & share url. We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
22 hours ago, P-Wolf said:

image.png.4785959f33c25b7ca9b80e1fc823e747.pngHow do I apply question marks with a pop-up explanation text in a text, like squarespace does on their Prices page?

You can use Lightbox plugin to achieve this. It supports click & hover

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/10/2019 at 3:39 PM, tuanphan said:

@LoveMoves Here is HTML (Add to Footer)

 
<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>

 

 

and CSS (Add to Home > Design > Custom CSS)

 
.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #f9674d;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: montserrat;
   font-weight: bold;
   font-size: 12px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

 

 

If it doesn't work, keep the code and post site url, i'll check.

Hi @tuanphan. I would love to use the above on the site I'm building and have added it successfully. However, what I really need is two sticky floating buttons like this on everybody (one on top of the other) rather than just one. Is that possible? 

And is it possible for them to appear on every page other than the homepage?

Many thanks if you see this and can help

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

Hi @tuanphan. I would love to use the above on the site I'm building and have added it successfully. However, what I really need is two sticky floating buttons like this on everybody (one on top of the other) rather than just one. Is that possible? 

And is it possible for them to appear on every page other than the homepage?

Many thanks if you see this and can help

Yes. Possibile. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/16/2021 at 2:39 AM, Coggleton1 said:

@tuanphan many thanks. I have sent you a message via your "Email me" form with he details

Okay. If you haven't receivent the answer, let me know

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

This floating button code is awesome!!!!

 

I have a little glitch on the home page on mobile though. See photo attached

I can't click any link at the button level for some reason. Gallery and pricing

 

Anyone would know if this is fixable?

 

 

www.creativeportrait.net.au

1883305650_ScreenShot2021-09-24at2.thumb.png.0c4cf2a90f965d57cb3c57f51d69d390.png

 

Link to comment
  • 0
13 hours ago, Jeremyn said:

I can't click any link at the button level for some reason.

The following ruleset is causing the div to expand and cover the links. Take it out.

    #book-me {
        bottom:0;
        top: 75%;
        padding-right: 0px;
        transform: 0;
    }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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