How to add a button to the mobile header between the logo and menu icon – Squarespace

Creating a mobile-friendly website is crucial in today’s digital landscape, where the majority of users access the internet from their smartphones. In this blog post, we will be discussing how to add a button to the mobile header of your Squarespace website, between the logo and the menu icon. This technique can be useful to have a call-to-action button on the most visible area of your website or to have a different way to access your pages. We will also be discussing the considerations you should have in mind when adding a button to your mobile header, such as the button’s size, color, and text.

Whether you’re a developer looking to improve your skills or a website owner looking to enhance the functionality of your mobile website, this guide will provide you with the knowledge you need to add a button to your mobile header on Squarespace.

Go to Design > Custom CSS > Paste the following code

/* Show button on mobile menu*/
@media screen and (max-width:1024px) {

/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
    width: 10% !important;
}

/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}