How to turn your last menu item into a button

If you’re on a template outside of the Brine or Bedford family, you may be having a hard time adding a button to your Squarespace navigation…

Meaning that your “Contact Me” or “Subscribe” menu link is looking exactly like the rest of your navigation bar and you have no way to change that through the Style Editor. That may not be 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 is going to help you make your last navigation link into a button, however you may find this a bit more complicated to follow than previous posts, mostly because different templates might need different snippets. 

Related: learn the basics of CSS so you can adapt your snippets

 

Here's the full code:

.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;
}
.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover {
  background-color: green;
  color: lightgreen!important;
}

 

Tutorial

(Short on time? Then skip ahead to the important notes about this tutorial)

 

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 (regardless of its native option to set either primary or secondary navigation links as buttons).

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

 

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 tag nav 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.

 

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


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.

 

Until next time,
B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way