Adding A Sticky Call To Action Side Tab

If you ever find you need to add a sticky CTA as a side tab, just follow the steps below!

After that, you should be set 🙂

Adding the HTML

In Settings –> Header and Footer, add the necessary code to the BEFORE THE </BODY> CLOSING TAG (FOOTER) section.

Adding the CSS

Add the following CSS as normal, swapping/omitting as necessary for your site:

#fs-side-button {
position: fixed;
z-index: 999999;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
left: -70px;
top: 235px;
}

#fs-side-button a {
color: black;
background-color: #fac01f;
display: block;
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
white-space: nowrap;
padding: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
letter-spacing: 2px;
transition: all 0.3s ease;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.05);
}

Variations

From here you can adapt as needed!

Menu
Google Rating
5.0
Based on 248 reviews
×
Get a Quote