How to Make Your Last Menu Item Into a Button

Did you know – as of May 2017 – that only one Squarespace family template allows you to add a button as your last menu item? Bedford, Anya, Bryant and Hayden are the only ones that include this feature.

That means that your “Contact Me” or “Subscribe” menu link will look exactly like the rest of your navigation bar unless you use one of those templates. Which is not that big of a deal for many people, but in some cases, you simply can’t compromise; you are set on your template choice and on having a prominent button on your nav.

The following tutorial might be a bit more complicated to follow than previous ones, mostly because different templates might need different snippets, so please feel free to leave a comment with your URL if the code isn’t working for you!

For this example, a template from the Brine family – Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, and Thorne – will be used.

And a simple Contact Me link at the end of the navigation will be the target.

How to add a button to your navigation bar in Squarespace with CSS.

 

Targeting a specific link in your navigation

First, you’ll need to find the name of the class of the link and the class of the navigation. Frankly, you can do it without adding the classes of the navigation, but by using them you make sure you target that primary (or secondary) navigation and none of the others on your page, if any.

In this case, the Contact Me link has the class .Header-nav-item just like all the other links in the menu

Finding a page link class with Inspect Element.

and the navigation – <nav> tag – has .Header-nav and .Header-nav--primary. We’ll use both.

Note that in the screenshot below a class by the name .sqs-frontend-overlay-editor-widget-host appears as well, that's because I'm using Inspect Element while inside the editor. Classes with similar wording can be ignored as they aren't used to style elements.

Finding the navigation class of the Brine template with Inspect Element.

In your custom CSS injection window you can start adding your targeting code (notice how the two classes from the <nav> tag aren't separated by a space):

.Header-nav.Header-nav--primary .Header-nav-item {

}

Now, if you were to add styling properties to that snippet you'd be editing ALL the links in your menu since they're all under the same class:

Example of styling all the links in the navigation.

So, to pinpoint the Contact Me link only, we'll take advantage of its position at the end of the menu and use something called pseudo-classes. In this case, the pseudo-classes that can help us are :last-child, :last-of-type, :nth-child and :nth-of-type()

There are advantages and disadvantages to using each of them, but to keep things simple we’ll use :last-of-type in this tutorial.

.Header-nav.Header-nav--primary .Header-nav-item:last-of-type {
  background-color: lightgreen;
}
Using last of type pseudo-class without proper targeting.

Curious right? The last two links are highlighted for some reason.

Well you see, what :last-of-type does is target the last items that belong to a type of element inside a parent.

In other words, and considering this example, if we have 3 page links and 1 folder/dropdown, that means there are two types of elements inside the parent (the <nav> tag): page links and folders.

By using :last-of-type, you're selecting the last page link AND the last folder inside your navigation. So if there were 3 page links and two folders inside your nav, it would select the same third page link but the second folder instead. And in case you're wondering, no it doesn't have anything to do with position. 

In the following screenshot, if we put both folders at the beginning of the nav followed by three page links, it still selects the second (last) folder and the third (last) page link, which happens to be at the end of the nav bar.

Showing an example of how last of type works.

So, the problem remains. How do you select ONLY the Contact Me page link when it's the last link in your navigation?  Well, you basically need to be more specific in describing which link you want to target.

Since you already know that folders and page links are two different types, based on the results of using :last-of-type, you can use that in your favor.

When looking closely at your inspect element window again, you'll notice your page links – including the Contact Me link – are simple <a> tags that sit inside a div in your <nav> tag, while your folder has been created with the use of a <span> tag that contains the <a> tags corresponding to your folder title and dropdown links.

How folders use a span tag in the Brine family template.

With that piece of information, you can make a slight modification to your snippet to make sure it only selects the elements with the .Header-nav-item class that are only <a> tags (and not spans like your folder). 

To see how that works, let's ignore the :last-of-type pseudo-class for the moment and see what using the a selector (the one that targets <a> tags) does when added to your page link class:

.Header-nav.Header-nav--primary a.Header-nav-item {
  background-color: lightgreen;
}
Example of how using a selector and the pseudo-class last of type works.

See? Now your folder doesn't get highlighted because despite having the same class as your page links, it's a <span> tag instead of an <a> tag.

And now, you can properly apply the :last-of-type pseudo-class to your snippet to select the last <a> tag of your navigation:

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type {
background-color: lightgreen;
}
Targeting a specific page link in your navigation using pseudo-classes.

Et voilà!

 

Creating your button with CSS styles

Regarding styling, there are many properties you can tweak to achieve the look you want, for example, by adding these:

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type {
background-color: lightgreen;
padding: 10px 20px;
border-radius: 3px;
border-bottom: 1px solid green;
color: green;
}

You get a lovely green button with rounded corners, a slight “shadow” on the bottom (created with the border-bottom property) and green font.

Creating a button in your navigation bar in Squarespace.

Of course, if you also want to create a nice effect when your visitors hover over it, you can add your desired properties to your snippet by using the :hover selector:

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover {
background-color: green;
color: lightgreen!important;
}
Creating a button in your navigation bar with hover mode.

TO KEEP IN MIND

  • This tutorial was made with the Brine family templates, so make sure to check how your template's navigation is constructed to use the right classes!
  • There's not only one way to achieve the same result, so don't be afraid to experiment and read about the other pseudo-classes mentioned.
  • When adding a hover mode to your new button, you might need to use the !important rule like in this example.

How about that? Now you can create your own gorgeous button on your navigation without having to stick to a specific template!

 

Until next time,
B.


RATHER CHANGE YOUR TEMPLATE?

Then take the Squarespace Quiz to find out which type of template would suit your business best!

SHOW ME THE WAY!
There's no need to change your Squarespace template to add a button to your navigation, add one with custom code!