How To Add A Click To Call Button To Squarespace Mobile Menu

This tutorial is specific for the latest version of Squarespace known as 7.1 and won't work for older versions of Squarespace. For more information, visit insidethesquare.co/themes

The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that link for mobile only.

In this Squarespace tutorial, you’ll learn how to add a click-to-call link that only shows up on the mobile menu of your site.

We’ll use CSS to hide it on desktop, and you’ll learn how to turn the last link on your desktop site to look like a button so you won’t lose that functionality.

---

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ This is specific for version 7.1 and won’t work on older versions of Squarespace.

→ There is more than one way to do this! Code is super customizable, and this is my technique.

---

Here are the codes from this tutorial:

This first one will hide the CTA button on any screen wider than 1024px:

@media only screen and (min-width:1024px){
.header-actions-action--cta {
display: none
}
}

This second code creates that button look for the last link in your menu. Be sure to change the color, border, and padding to suit your own site style!

.header-nav-item:last-of-type a{
border: 2px solid #000;
background:#e5f5f6;
padding: 6px 15px;
margin-top:-6px
}