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

This tutorial will show you how to make your last navigation item a button in Squarespace 7.1.

Complexity: Easy

---

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;
}

---

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.