Do you want to add images to your Squarespace navigation?

Adding images to your Squarespace website navigation is a great look and can be easily achieved if you follow these simple steps:

This code is Squarespace version 7.1 and we are using Beaumont template.

1. Add your images to Squarespace custom files

From your Squarespace dashboard navigate to

Design > Custom CSS then click the link ‘manage custom files’

Upload the images you want to use here.

* Important note:

Make sure the images you want to use are the correct size and aspect ratio for your navigation. We are using 3:2 images at 210px wide.

2. Add images to navigation links

Now we are ready to add the code to our Custom CSS panel.

First we want to select the first navigation link in the folder using :nth-child and change the font size:

.header-nav-folder-item:nth-child(1) {
font-size: 27px; }

Next we add the image using ::before pseudo element. The easiest way to do this is copy the below code and add your image url to the content section. Do this by clicking on your image in manage custom files.

Example:

.header-nav-folder-item:nth-child(1) {
font-size: 27px;
&::before { content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669321ab154ba4129534/1586521747705/add-image-nav-squarespace-1.jpg');}

3. Add images to all navigation links

To add images to more folder items just copy the code and change the number for the link and the image URL.

Example:

.header-nav-folder-item:nth-child(2) {
font-size: 27px;
&::before {
content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669e4164e335ad04395e/1586521758115/add-image-nav-squarespace-2.jpg');}

4 . Add some styling and change layout

If you want to change the layout and add some styling you can add the following code. This changes the layout and some spacing and you change the colour to suit your design.

.header-nav-folder-content {
display: flex; }

.header-nav .header-nav-item--folder .header-nav-folder-content {
width: auto;
background-color: lightgrey !important; }

Important Note: For this layout we need to add some padding around the images. Full code below.

Full code:

Stacked layout

.header-nav-folder-item:nth-child(1) {
font-size: 27px;&::before {content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669321ab154ba4129534/1586521747705/add-image-nav-squarespace-1.jpg');}

.header-nav-folder-item:nth-child(2) {
font-size: 27px;&::before {content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669e4164e335ad04395e/1586521758115/add-image-nav-squarespace-2.jpg');}

Horizontal Layout

.header-nav-folder-content {display: flex;}

.header-nav .header-nav-item--folder .header-nav-folder-content {
width: auto;background-color: lightgrey !important; }

.header-nav-folder-item:nth-child(1) {
font-size: 27px;&::before {content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669321ab154ba4129534/1586521747705/add-image-nav-squarespace-1.jpg');
padding-right: 21px;}

.header-nav-folder-item:nth-child(2) {
font-size: 27px;&::before {content:url('https://static1.squarespace.com/static/5e8df81224de683d5deb0832/t/5e90669e4164e335ad04395e/1586521758115/add-image-nav-squarespace-2.jpg');
padding-right: 21px;}

If you have any questions or need any help with your Squarespace website design post a comment below or get in touch now.