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 below, Then head to to ‘Design’ and then ‘Custom CSS’ and paste the code.

---

Step 2

From your Squarespace account, go to the Custom CSS Editor. 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, express 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.