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 👇

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. 

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?