Mobile navigation button in Squarespace

Mobile navigation button in Squarespace

Adds a button to mobile navigation near hamburger that’s always visible

Shape SquareSpace 7.1
Requires Business plan or higher
Free

Why use

By default, Squarespace allows only one button in the header, but sometimes you want more.

Code

<!-- Additional Menu Button plugin by opsquare.co --> 

<!-- JS --> 
<script>  
/* Additional Mobile Button plugin by opsquare.co */
(function () {

    /*** Plugin options ***/
    const options = {
        text: 'Button text',
        url: 'https://google.com',
        type: 'primary',    // primary / secondary / tertiary
        newTab: false,
    };
    /*** Stop editing ***/

    function opMobileButton() {
        const buttonClass = `sqs-button-element--${options.type.toLowerCase()}`;
        const targetAttr = options.newTab ? 'target="_blank"' : '';

        const buttonHTML = `${options.text}`;

        const mobileTarget = document.querySelector('.header-display-mobile .header-title-logo');
        if (!mobileTarget) return;

        document.body.classList.add('op-has-mobile-nav-button');
        mobileTarget.insertAdjacentHTML('beforeend', buttonHTML);
    }

    document.addEventListener('DOMContentLoaded', () => {
        opMobileButton();
    });

})();
</script>

<style>
/*** edit the button styling ***/
.op-has-mobile-nav-button .op-added-button-mobile {
    margin-left: auto;
    padding: .25rem .8rem !important;
    font-size: .95rem !important;
    white-space: nowrap;
    margin-right: 4px;
}

.op-has-mobile-nav-button .header-display-mobile .header-title-logo {
    display: flex;
}
</style>

<!-- end Additional Menu Button plugin -->

How to install

  1. Add code to Code Injection
  2. Set up the options

Options

Javascript

/*** Plugin options ***/

    const options = {
        text: 'Button text',
        url: 'https://google.com',
        type: 'primary',    // primary / secondary / tertiary
        newTab: false,
    };

/*** Stop editing ***/
Option Value Description Example
text Any text The text that will appear on the button Log in
url Full link starting with https:// The URL the button will link to https://google.com
type primary | secondary | tetriary The button type primary
newTab true | false Open the link in a new tab true

CSS Variables

--op-additional-button-margin: 4px; /* Distance between the buttons */