Squarespace Secrets: How to put images in your navigation.

I've only had a few clients request this, but unless you know that Squarespace actually supports html in their navigation titles, it can be extremely difficult. Here is an example of one I did just the other day for tyesbytara.com.

Tara has a few different brand that have different styles of products. After running three different sites for a while she decided to switch down to one, but still wanted to show the three different brands in the navigation. So let's get into how to do this.

tyes_by_tara.png

1. In the configure page section on the navigation item you want to replace with an image you need to type in something like this.

<span class="entyece" alt="entyece"></span>

Here we are creating the class called "entyece" and giving it an alt attribute to give the search engines more details of what it is.  You can name your class whatever you want, we'll be using that later in our css.

2. Upload the image we want to use and type our custom css.  If you've never done custom css before, then you might want to get some help with this part, but you start by going to Design -> Custom CSS.

At the bottom of the custom css area you'll want to click on manage custom files and then upload the images you are wanting to use.  Make sure it's not too big, but it doesn't need to be sized exactly.  Here is the code I used to make it work on Tara's site:

.entyece {
background-image: url('your-image-url-here');
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 70px;
display: inline-block;
position: relative;
top: -10px;
}

The background image url comes by having your curser where you need the url and then clicking on the image in the manage custom files area.  It will automatically paste the url you need.  Background-size: contain; means we don't have the have the image the exact size, it will make sure it fits in the space we create.  The height and width I figured based on the sizes of the existing navigation.  Display: inline-block; needs to be there so it will show up. Position: relative; and the subsequent top: -10px; are two that you may or may not need on your own site.  When I placed the images in the navigation, the top of the image was aligning with the top of the navigation items, which dropped the images too low, so I used those settings to bring it up a little.

I'm sure there are other ways to do this and different ways to write the css, but this is just one example that has worked for me and hopefully is helpful to you.

Let me know if you have any questions about this or any other customizations you want to see a tutorial for and I'll see if I can help you out.

Cheers!