Squarespace Tip: How To Add A Button To Your Navigation

So you want to embed a call to action (CTA) button into your primary navigation? I’m here to show you how to do just that!

First things first, check the template you are using. The templates in the Bedford family support the last navigation link as styleable buttons. Bedford family templates are Anya, Bryant, Bedford, and Hayden. If you are using one of these templates, Squarespace explains how to enable the button here.

If you are not using a Bedford family template, welcome to my blog post! Here is a sample of custom CSS for the Brine template. This CSS will give you a black, pill-shaped button with white font. When hovered over, the button is white, with a black border and black font.

 

Look at me, I’m a button!

 
div.Header-nav-inner a:last-child{
    color: #fff !important;
    padding:10px 20px !important;
    border: 1px solid #000 !important;
    background-color: #000 !important;
    border-radius:16px !important; 
    }
div.Header-nav-inner a:last-child:hover{
    color: #000 !important;
    background-color:#fff !important;
    }
*/You may not need the ‘!important’ , but I included it just incase.*/ 

The hardest part about creating buttons in the navigation is knowing how to target the last link in your navigation. But once you know, it’s easy to play around with the CSS and style the button.

Since not all Squarespace templates use the same html structure, the target code won’t be the same. I’ve put together this table to help you out for some of the more popular templates:

TemplateLast Nav Link Target
Brine, Farro, Rallydiv.Header-nav-inner a:last-child
Avenuenav.main-nav li:last-child
Jones, Pacificdiv#mainNavWrapper nav div:last-child a
Fivenav#main-navigation ul li:last-child a

Let me know if there’s another template you’d like to see in this table!