Add Multiple Buttons in the Header

What does this code do?

This code snippet will allow you to style navigation links to look like buttons so that you can have multiple buttons in the header.

Squarespace 7.0

Depending on your template, you have the option to add pages to the Primary Navigation or the Secondary Navigation so you do not need to use code to achieve this effect.

Add all the pages you want to display as links to the Primary Navigation. Then add all the pages you want to display as buttons to the Secondary Navigation.

In the Site Styles under the Secondary Navigation, check off the button to inherit the Primary Navigation styles. Then choose to style as a button.

Squarespace 7.1

The “Take Action” button was added without code using the Header Editor in Squarespace.

About, News, Read Me, and Portfolio are all pages in the Main Navigation.

To style the “Portfolio” navigation link to look like a button, copy and paste this code into the Custom CSS.

/* Multiple Buttons in the Header */
.header-nav-item:nth-of-type(4) {
    background-color: #a8a6a1; // color of button
    border-color: #a8a6a1; // color of button border 
    padding: 1.2rem 4rem; // space between text and border 
    border-radius: 5px; // optional: gives a rounded edge 
    font-weight: 400; // boldness of the  button font
}
.header-nav-item:nth-of-type(4) a {
  color: white !important; // font color of button
}
.header-nav-list {
  display: flex; 
  align-items: center; //vertically centers the other navigation items
}

This code is set to style the fourth navigation item. Change the number 4 to match the navigation item you want to change. Then customize the colours and spacing to match your brand and style.

To get different shaped buttons, you will need to adjust the border-radius.

1. For a square, you can delete the border radius.

2. For a pill or more rounded button, increase the border-radius.

3. For an underline button, delete the border radius and set the border to a border-bottom.

4. For a petal shaped button use the following as your border radius.

  border-radius: 20px 0px; /* optional: gives a rounded edge */

To style more than one navigation item, you can use commas to duplicate the selector. For example, if I wanted to change the third and fourth navigation item I would use the following.

/* Multiple Buttons in the Header */
.header-nav-item:nth-of-type(3), .header-nav-item:nth-of-type(4) {
    background-color: #a8a6a1; // color of button
    border-color: #a8a6a1; // color of button border 
    padding: 1.2rem 4rem; // space between text and border 
    border-radius: 5px; // optional: gives a rounded edge 
    font-weight: 400; // boldness of the  button font
}
.header-nav-item:nth-of-type(3) a, .header-nav-item:nth-of-type(4) a {
  color: white !important; // font color of button
}
.header-nav-list {
  display: flex; 
  align-items: center; //vertically centers the other navigation items
}

Bonus: Mobile for Squarespace 7.1

If you want multiple buttons to also appear in the mobile menu, you will need to add some additional code. Copy and paste this code into the Custom CSS.

/* Multiple Buttons in Mobile Menu */
.header-menu-nav-item:nth-of-type(4) .header-menu-nav-item-content {
  background-color: #a8a6a1; // color of button on mobile
  border-color: #a8a6a1; // color of button border on mobile
  padding: 1.2rem 5rem; // space between text and border on mobile
  font-weight: 500; // boldness of the button font on mobile
  color: white; // color of button font on mobile
  font-family: "Poppins"; // button font type on mobile
  font-size: 1.3rem; // button font size on mobile
}

.header-menu-nav-item:nth-of-type(4) {
  position: absolute;
  top: 56vh; // move button down on mobile
}

Then customize the sizing, colors, and position of the button.

How To Use It

1. Copy and paste the code as indicated above.

2. Change the 4 to match the navigation item you want to change.

3. Then customize the colours and spacing to match your brand and style.