How to make your last navigation item a button in Squarespace 7.1

Customizing your website navigation is a great way to guide users to important actions — such as booking a service, contacting you, or purchasing a product. One stylish and strategic customization is to turn the last navigation item into a button, making it stand out visually from the rest of your links. In this tutorial, you’ll learn how to target and style the last navigation link in Squarespace 7.1 to look and function like a button using simple custom CSS.

Table of Contents

Why Make the Last Navigation Link a Button
Step-by-Step Instructions
Key Takeaways
FAQs
Conclusion

Why Make the Last Navigation Link a Button?

• It draws attention to your most important call-to-action (CTA).

• It improves user experience and conversions.

• It enhances the overall design and hierarchy of your menu.

Complexity: Easy

---

Step-by-Step Instructions

Step 1

Simply copy the css code below. Then head to ‘Design’ and then ‘Custom CSS’ and paste the code.

---

Step 2

From your Squarespace account, go to the Custom CSS Editor and paste the code into the Custom CSS editor box.

// Color, border, padding and transition properties
.header-nav-list .header-nav-item:last-child a {
    color:#fff !important;
    border-color: #8A8B86;
    background: #8A8B86;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    padding: 1.3rem 2.171rem;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
}

// Alignment of navigation item
.header-nav-list {
    align-items: center;
}

---

Step 3

Add the code below if you want a hover effect on the button.

// Hover properties
.header-nav-list .header-nav-item:last-child a:hover {
    background: #e1ccbe;
    border-color: #e1ccbe;
    color: #fff !important;
}

---

Key Takeaways

• Squarespace 7.1 allows easy customization using Custom CSS.

• You can target the last nav item using :last-child in CSS.

• Styling this link as a button draws focus and improves CTA visibility.

• Make sure the link you want to highlight is last in the navigation menu.

FAQs

Can I make a different nav link a button instead of the last one?
Yes, but you'd need to use custom classes or IDs instead of :last-child.

Will this work on mobile navigation too?
No, this CSS targets the desktop header only. Mobile nav requires a separate override, or consider using the Fluid Engine mobile editor for that.

Can I add multiple buttons in the navigation?
You can, but it's best to limit to one main CTA for clarity and design balance.

---

---

Conclusion

Turning your last navigation item into a button on Squarespace 7.1 is a simple but powerful way to emphasize key actions and guide your visitors. With just a small snippet of CSS, you can enhance both the design and functionality of your site’s header.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.