Turn the Header Navigation Links into Buttons

What does this code do?

This code snippet will allow you to style the header navigation links to look like buttons.

Note: In Squarespace 7.0, on some templates you can do this in Design > Site Styles.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Header Navigation Buttons */
.header-nav-list a {
  border: 2px solid white; /*border colour */
  padding: 2px 10px !important; /* spacing top/bottom left/right */
  background: white; /* background color */
  color: black !important; /* font color */
  border-radius: 5px; /* optional: gives a rounded edge */
} 

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 make the links act more like a button, you can add some transparency on hover.

/* Header Navigation on Hover */
.header-nav-list a:hover {
 opacity: 0.7; /*gives a transparency on hover */
}  

If you have any folders, you may not want the dropdown links to look like buttons. Add this code as well.

/* Folder Items */
.header-nav-folder-item a {
  background: black; /*background color */
  color: white !important; /* font color */
  border: none; /* removes border */
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the border, color, and hover transparency.