Enable Two Buttons in Squarespace Header

If you want to add two buttons to your Squarespace header you might be scratching your head wondering if it’s possible.

Well the good news is that despite it not being a native option on Squarespace, it IS possible. Keep reading to find out more…

Watch the video

Check out the YouTube video below 👇

Firstly, open up Chrome Developer Tools and get the target name for the current navigation item you want to turn into a button e.g. contact. 

Copy this target name and head to Website > Website Tools > Custom CSS and firstly paste this target into your custom CSS box.

You then need to add in the following lines of code:

.header-nav-item:nth-child(3) {

border: solid 1px #000000;

padding: 10px 20px;

}

Within that first line, your number (in this case 3) refers to the navigation item on your website. For example if your contact page is the 3rd item in your menu, and it’s this that you want to turn into a button, you will add 3 to the line.

The border section of the code adds a, you guessed it, border around the navigation element and the padding ensures it looks right on your website. You can play around with the thickness, colour and padding of your border.

To add another button, simply copy and paste the lines of code again and change the number for the navigation element you want to target.

You can also add a background to your buttons if you want them to be solid buttons. To do that you’ll need to add this line to your code:

.header-nav-item:nth-child(4) {

border: solid 1px #000000;

background: #000000;

padding: 10px 20px;

}

If you want to add a hover effect to your button the code you’ll need is:

.header-nav-item:nth-child(3), .header-nav-item:nth-child(4){

transition: 0.2s;

&:hover {

filter: invert(100);

}

}

And finally, you’ll need to sort the padding out, so we’ll add this to the end of our code:

.header-nav-item {

padding: 10px;

}

The full code

Your full code for two header buttons is going to look like this:

.header-nav-item:nth-child(3) {

border: solid 1px #000000;

padding: 10px 20px;

}

.header-nav-item:nth-child(4) {

border: solid 1px #000000;

background: #000000;

padding: 10px 20px;

}

.header-nav-item:nth-child(3), .header-nav-item:nth-child(4) {

transition: 0.2s;

&:hover {

filter: invert(100);

}

}

.header-nav-item:nth-child(4) a {

color: #ffffff !important;

}

.header-nav-item {

padding: 10px;

}

---

📩 Join the inner circle to get exclusive code updates

---

You can have a play around with creating your buttons, changing aspects such as colours and padding to get the look you want. Once you’re happy, hit save and you’ll have added two buttons to your header on Squarespace.

---

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?