Adding a floating contact-button on the Brine?

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

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/

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/

3. (Mobile) Add button Back to top?

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

@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

2. (Desktop – Resources) Reduce space?

https://www.redflagspgh.org/resources

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

https://www.redflagspgh.org/about

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!

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!

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

How do I apply question marks with a pop-up explanation text in a text, like squarespace does on their Prices page?

22 hours ago, P-Wolf said:

How 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

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

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?

21 hours ago, tuanphan said:

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

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

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

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

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.

Once more Creedon, you solved my problem so quickly. Thank you so much!

On 8/10/2019 at 4: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! This worked beautifully on the first go, but I was wondering... is it possible to make the whole button clickable, not just the text? You know what I mean?

Thanks a lot in advance!

5 hours ago, CrisH said:

Hi! This worked beautifully on the first go, but I was wondering... is it possible to make the whole button clickable, not just the text? You know what I mean?

Thanks a lot in advance!

Add to Design > Custom CSS. If it doesn't work, please share link to your site, we can tweak code easier

.kl-float a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 123456789;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS. If it doesn't work, please share link to your site, we can tweak code easier

.kl-float a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 123456789;
}

 

just adding the "a" did it! Thanks 🙂 

Now I'm gonna experiment with adding a hover over state....

24 minutes ago, CrisH said:

just adding the "a" did it! Thanks 🙂 

Now I'm gonna experiment with adding a hover over state....

What is site url?

2 hours ago, tuanphan said:

What is site url?

https://seafoodpeople.net/cristiane-hamnes

I have adapted the floating button from your previous codes, now i'm just trying to see if i can hide it behind the footer and menu when on mobile... 

3 hours ago, tuanphan said:

What is site url?

So I manage to hide it (completely) for mobiles, see the code in bold below.... but I would like to hide it (on mobile only) when it reaches the footer and when I open the menu. Is this at all possible?

The link sent previously is without the bold code under, so you can see what i mean, specially with the floating button showing when opening the menu on mobile.

<div class="kl-float">

   <a href="https://seafoodpeople.squarespace.com/s/Cristiane-Hamnes.vcf">

   <p style="color:white">Download vCard</p>

   </a>

  <style>

@media screen and (max-width:767px) {

    .kl-float {display: none !important;}

   </style>

</div>

And here is the CSS

.kl-float a {
   position: fixed;
   opacity: .9;
   top: calc(25%);
   right: calc(5%);
   z-index: 20000;
   background-color: #CBA052;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   font-family: poppins;
     font-size: 14.4px;
   padding-top: 0px;
   padding-right: 20px;
   padding-bottom: 0px;
   padding-left: 20px;
}
.kl-float a:hover {
  background-color: #AF7C21;
}

18 hours ago, CrisH said:

And here is the CSS

.kl-float a {
   position: fixed;
   opacity: .9;
   top: calc(25%);
   right: calc(5%);
   z-index: 20000;
   background-color: #CBA052;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   font-family: poppins;
     font-size: 14.4px;
   padding-top: 0px;
   padding-right: 20px;
   padding-bottom: 0px;
   padding-left: 20px;
}
.kl-float a:hover {
  background-color: #AF7C21;
}

Add this to Design > Custom CSS

body.header--menu-open .kl-float {
    display: none;
}
footer.sections {
    z-index: 999999999999 !important;
}

43 minutes ago, tuanphan said:

Add this to Design > Custom CSS

body.header--menu-open .kl-float {
    display: none;
}
footer.sections {
    z-index: 999999999999 !important;
}

 

Works beautifully, thank you so much!! ❤️