When users click Header button >> Show more buttons like this
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; }
#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>
#3. Change button text/url here