Buy me a coffee

Click Header button – Show More Buttons

When users click Header button >> Show more buttons like this

Click Header Button Show More Buttons 1 Min

You can follow these steps.

#1. Use this code to Custom CSS box

div.additional-buttons {
    position: absolute;
    top: 50px;
    display: flex;
    flex-direction: column;
}
div.additional-buttons>a.btn:first-child {
    margin-bottom: 10px;
}
  div.header-actions-action>a.btn:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
  a.show-hide:after {
    transform: rotate(180deg);
}
div.header-display-desktop a.btn:after {
    display: inline-block;
}

Click Header Button Show More Buttons 2 Min

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$('.btn.btn--border').click(function(event) {
    event.preventDefault(); // Prevent default action of the <a> tag

    // Toggle the show-hide class on the original button
    $(this).toggleClass('show-hide');

    // Check if the additional buttons already exist
    if ($('.additional-buttons').length === 0) {
        // Create a div containing two buttons
        var buttonContainer = $('<div class="additional-buttons"></div>');

        // Create buttons with the same classes as the original button
        var button1 = $('<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="https://google.com">Button 1</a>');
        var button2 = $('<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="https://facebook.com">Button 2</a>');

        // Append two buttons to the container
        buttonContainer.append(button1).append(button2);

        // Append the container to the element with the specified classes
        $('.header-actions-action.header-actions-action--cta').append(buttonContainer);
    } else {
        // If the buttons exist, remove them
        $('.additional-buttons').remove();
        $(this).removeClass('show-hide'); // Reset show-hide class when buttons are removed
    }
});
</script>

Click Header Button Show More Buttons 3 Min

#3. Change button text/url here

Click Header Button Show More Buttons 4 Min