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
Go to solution Solved by tuanphan,

Question

Hello I'd like to add a floating button on the right side of my page. Is there a quick fix for this? Thank you all a lot.My website is lovemoves.de

Edited by LoveMoves
Initial Revision
Link to post
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@GooseGuy Please post the URL for your cover page. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take

Posted Images

20 answers to this question

Recommended Posts

  • 2

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 1
18 minutes ago, GooseGuy said:

I apologize I am very scatter brained today.

 

Here is the link 

redflagspgh.org

password

RedFlags2020

You mean button underline? Add this to Cover Page Header

<style>
  a {
    text-decoration: none;
}
</style>

Also, h9 doesn't exist, please rename h9 to h6

<h6 style="color:white">EXIT</h6>

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Hello! I'm attempting this same floating button. I used your suggestion above and it looks great, but it doesn't let me click on it. Any advice much appreciated if you happen to see this. Thanks so much!

Link to post
  • 0

@GooseGuy

Please post the URL for your cover page.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
13 hours ago, GooseGuy said:

Hey this worked brilliantly. One thing I wish is that it appeared on the cover page of the site as well. Any suggestions?

I'm not sure this will work on Cover Page

Try adding to Cover Page Settings > Advanced > Header

<div class="kl-float">
   <a href="https://www.tsiapparel.com/uniform-enquiry">
   <h9 style="color:white">REQUEST QUOTATION</h9>
   </a>
</div>
<style>
  .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;
}
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Thanks for the quick response. Currently the site isnt live but here are screenshots of the home page using the code you suggested and the rest of the pages. 

 

Some reason the home page exit doesn't look the exact same as the other exit button. Let me know if you have any suggestions on making them look identical

Here is the code I used for the exit button on all but cover page 

CSS 

.kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight:;
   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;
}

 

HTML in footer

 

<div class="loader">
  
</div>

<div class="kl-float">
   <a href="https://google.com">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>

Screen Shot 2020-11-09 at 12.32.07 PM.png

Screen Shot 2020-11-09 at 12.31.57 PM.png

Link to post
  • 0

This is what I put inside the coding for cover page settings

 

<div class="kl-float">
   <a href="https://google.com/">
   <h9 style="color:white">EXIT</h9>
   </a>
</div>
<style>
  .kl-float {
   position: fixed;
   opacity: ;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #eb2529;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
   font-family: Futura;
   font-weight: ;
   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;
}
</style>

Link to post
  • 0
21 minutes ago, GooseGuy said:

Currently the site isnt live

Your site doesn't have to be live for us to look at it if you put a site-wide password on it and give us the password.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

From what you can see with the screenshots does anyone have a suggestion on how to change the look of the button on the cover page to look like the button on the rest of the pages 

Link to post
  • 0

changing the style to none worked. The only difference that I notice now is the placement of the word exit. It seems to be slightly off center on cover page and centered perfectly on the rest.

 

redflagspgh.org

RedFlags2020

Link to post
  • 0

As well as the red block is slightly moved away from right side of screen on cover page

 

but flipping back and forth between pages the most noticeable is the text 

Link to post
  • 0

Hi there. I'm attempting to do something similar to this but use icons buttons within the float bar instead of text -  for example social media icons or icons that relate to each page of website. Is there any way to do this? 

Thanks

Mehak

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...