By default, Squarespace allows only one button in the header, but sometimes you want more.
Why use
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
- Add code to Code Injection
- Set up the options
