Squarespace Tutorial | Replace button CTA in header nav bar with an image
CTA buttons are commonplace in navigation bars on Squarespace. Often directing users to contact pages or booking forms, almost all Squarespace websites will include one.
Recently I had a client however who wanted to replace the CTA button in their navigation bar with something else. They wanted an image instead.
The good news for them was it can be done and today I’m going to show you how…
How to replace a CTA button in your navigation bar with an image
Within your edit dashboard select edit site header. Select elements and toggle on the button option. This will add the CTA button to your header. Hit save and then navigate to your Custom CSS panel.
First things first you need to hide the CTA button which you can do by adding the following code:
.header-actions-action--cta .btn {
display: none !important;
}
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
To then add the image in its place add the following code:
.header-actions-action--cta {
background-image: url(https://static1.squarespace.com/static/image-url-here);
background-size: contain;
background-repeat: no-repeat;
padding: 2.5em;
/*completely optional*/
margin-top: 20px !important;
}
To get the image URL click Manage Custom Files and upload the image you want to use. Once you’ve uploaded it all you need to do is click it and it will automatically paste the URL into the custom CSS panel.
This code allows you to determine what the image looks like including the size and margins. You can play around with the padding and margins in order to find the exact look you’re after.
Hit save and you’ll have replaced the CTA button in your header with an image.
Found this tutorial useful? Take a look at the by Crawford blog for more of my Squarespace tips and tricks.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
