Web Design & Development

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);


From here you can adapt as needed!

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles