How to make your mobile menu last navigation item a button
Transforming the last navigation item in your Squarespace mobile menu into a button can enhance your site's design and improve the user experience. This guide will walk you through the steps to achieve this customization in Squarespace 7.1.
Benefits of Turning the Last Mobile Menu Item into a Button
Improved Visibility: A button stands out more than a standard text link, drawing attention to important calls to action like "Contact Us" or "Sign Up."
Enhanced User Experience: Buttons provide a clear, clickable target, especially on mobile devices where touch interaction is common.
Higher Engagement Rates: Styling your CTA as a button can encourage users to take action, potentially increasing clicks, conversions, or inquiries.
Polished Aesthetic: A button in your navigation menu creates a modern and professional look that aligns with contemporary web design trends.
Customizable Design: With CSS, you can easily adjust the button's size, color, shape, and hover effects to match your site's branding.
Complexity: Easy
Step 1
Copy the code below and from the Squarespace dashboard navigate to Pages > Webtools > Custom CSS and paste the code.
// Color, border, padding and transition properties
[data-folder="root"] > div > div > div:nth-last-child(1) a {
/* Sets the border color of the button */
border-color: #8A8B86;
/* Sets the background color of the button */
background: #8A8B86;
/* Defines the thickness of the button's border */
border-width: 2px;
/* Specifies the border style (solid line) */
border-style: solid;
/* Ensures the element is displayed as an inline block to respect padding and dimensions */
display: inline-block;
/* Smoothens the font rendering for better visual quality */
-webkit-font-smoothing: antialiased;
/* Sets the height of each line to normal for consistent spacing */
line-height: normal;
/* Adds padding inside the button for spacing */
padding: 1.3rem 2.171rem; /* Vertical: 1.3rem, Horizontal: 2.171rem */
/* Applies smooth transitions for background color and text color changes */
-webkit-transition: 0.1s background-color linear, 0.1s color linear; /* For WebKit browsers */
-moz-transition: 0.1s background-color linear, 0.1s color linear; /* For Mozilla browsers */
-o-transition: 0.1s background-color linear, 0.1s color linear; /* For Opera browsers */
transition: 0.1s background-color linear, 0.1s color linear; /* Standard transition */
/* Removes Underline from Mobile Active Header Navigation Link */
.header-menu-nav-item-content {
background-image: none !important;
}
}
Step 2
Change the Border-color, Background, border-width border-style as well as the padding to your liking.
Step 3
Add the code below if you want a hover effect on the button.
// Hover properties
[data-folder="root"] > div > div> div:nth-last-child(1) a:hover {
background: #e1ccbe;
border-color: #e1ccbe;
color: #fff !important;
}
Conclusion
Turning the last navigation item in your mobile menu into a button is a simple yet powerful way to enhance your Squarespace website. It not only boosts usability but also ensures your most important action stands out to visitors. By following this guide, you can create a seamless, professional design that improves your site's effectiveness.
See other related blog
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.
