MrBoBo69

Code To Add Sticky Contact CTA

Jul 24th, 2024
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.27 KB | Source Code | 0 0
  1. <ul id="stickyContact">
  2.     <li class="last"><a href="mailto:[email protected]"><i class="fa fa-envelope"></i><span>Email us</span></a></li>
  3.     <li class="first"><a href="tel:1300205246" ><i class="fa fa-phone"></i> <span>Contact us</span></a></li>
  4. </ul>
  5.  
  6. /* CSS For sticky CTA button */
  7.  
  8. #stickyContact {
  9.   position: fixed;
  10.   bottom: 39%;
  11.   list-style: none;
  12.   z-index: 99999;
  13.   right: -121px;
  14.   transform: rotate(-90deg);
  15.   padding-left: 0;
  16.   margin-bottom: 0;}
  17. #stickyContact li {
  18.   margin: 0 0 0 .5em;
  19.   padding: 0;
  20.   display: inline-block;}
  21. #stickyContact li a {
  22.   padding: 10px 20px 10px 20px;
  23.   text-decoration: none !important;
  24.   color: #fff !important;
  25.   font-size: 14px;
  26.   font-weight: 500;
  27.   background: #008fd5;
  28.   border-radius: 4px;}
  29. #stickyContact li a span {
  30.   padding-left: 10px;}
  31. #stickyContact .first a i {
  32.   transform: rotate(90deg);
  33. }
  34.  
  35. @media screen and (max-width:600px){
  36.     .services-page-icon .elementor-icon-box-wrapper{align-items: center;}
  37.     .services-page-icon .elementor-icon-box-icon{box-shadow: none !important;}
  38.     #stickyContact{bottom: 0; right: 0; left: 0; transform: rotate(0deg); text-align: center; background: #008fd5; padding: 12px;}
  39.     #stickyContact li.last{border-right: 1px solid #fff;}
  40.     #stickyContact li{margin:0;}
  41. }
Tags: CSS
Advertisement
Add Comment
Please, Sign In to add comment