How To Add a Click to Call Button On Squarespace Website Mobile Menu
In today's CSS trick, I will teach you how one can easily add a click-to-call button in the mobile menu bar for the Squarespace website.
To add a click-to-call action button, follow these steps:-
1. Go to "Edit Site Header" and click on the edit menu.
3. Now enable "Button" and give it the name "Click to Call".
4. Now click on the settings icon, click on Phone and write down your phone number with your country code.
As I am adding this click-to-call button only to the mobile menu of the Squarespace website, To hide it on the desktop, I will add the following CSS code to Squarespace Custom CSS.
@media only screen and (min-width:1024px){
.header-actions-action--cta {
display: none
}
}
Here is the code that you can use to change the colour, border and padding of the button according to your site style.
.header-nav-item:last-of-type a{
border: 2px solid #964B00;
background:#FFD700;
padding: 8px 16px;
margin-top:-8px
}
