Buy me a coffee

Add 3 stacked buttons to Header

#1. Use this code to Code Injection > Footer (replace example button text/URL with your desired text/URL).

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary second-button" href="https://google.com">Button 02</a>
<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary third-button" href="https://ebay.com">Button 03</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('a.second-button').insertAfter('a.btn');
    $('a.third-button').insertAfter('a.second-button');
});
</script>

add-3-stacked-buttons-to-header-01-min

#2. Use this code to Custom CSS box

a.second-button, a.third-button {
    display: none;
}
header#header a.second-button, header#header a.third-button {
    display: inline-block !important;
    margin-top: 5px;
}
div.header-actions-action--cta {
    flex-direction: column;
    display: flex;
}

add-3-stacked-buttons-to-header-02-min

#3. Result

add-3-stacked-buttons-to-header-03-min

#4. Buttons here, use Primary Button Style. You can replace “primary” with “secondary” or “tertiary”

add-3-stacked-buttons-to-header-04-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder