How to Make Your Last Navigation Item a Button in Squarespace

header.jpg

When it comes to website design, you have to get creative with your layouts, features, photos and more to help your site stand out from the crowd. One of the ways we like to enhance our websites is through navigation buttons.

By using navigation buttons, you are able to create a clear call to action for website visitors and potential clients. Highlighting items in your main navigation at the top of your site such as "Book now", "Contact me", etc. can really draw attention to specific calls to action on your website.

To achieve this look, access your Custom CSS settings through the Design tab of your Home menu. Within the Custom CSS window, add the following text in the editor.

This snippet will allow you to style the last nav item differently (note the :last-of-type selector):

/*Make last nav item a button*/
a.Header-nav-item:last-of-type {
    background: #333;
    color: #fff!important;
    padding: 11px 9px!important;
}

For templates with a Secondary Nav (like Brine), this snippet will allow you to target the last item in the secondary nav only:

/*Make last nav item a button*/
.Header-nav--secondary a.Header-nav-item:last-of-type {
    background: #333;
    color: #fff!important;
    padding: 11px 9px!important;
}

And hover style:

/*Add hover style to last nav item button*/
a.Header-nav-item:last-of-type:hover {
    background: #f3f3f3;
    color: #333!important;
}
Screen Shot 2019-06-10 at 10.57.44 AM.png

Feel free to edit the color of the button and hover within the code as well to reflect your branding and website design. Make sure to hit Save and your website will now reflect those changes.

hover.gif

The process is pretty simple, but the slight change in your website design can really draw attention to the content you want to bring to the forefront of your navigation layout.

Website Strategy Guide

Want to Build an Irresistible & Profitable Website?

Grab our 7 steps to launching a seriously legit online presence that engages + converts!

Try out this custom CSS on your website today. It will only take a few minutes to update on your site and incorporate some customization into your templated design. See what additional traffic you can gain to your highlighted page through this design quick tip!

If you’ve incorporated this CSS trick onto your Squarespace site, let us know in the comments below—we’d love to check it out!

You might also like…