How to add a Second Button to Squarespace Header

To add a Second Button to Squarespace Header, you can use these code.

  • If you can’t make it work, you can comment below/message me/email me with site url, I can help easier.

#1. Use this code to Code Injection > Footer. You can change text/URL in the code (red arrow)

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--secondary second-button" href="https://google.com">Contact</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');
});
</script>

#2. Use this code to Custom CSS box

a.second-button {
    display: none;
}
header#header a.second-button {
    margin-left: 1.2vw;
    display: inline-block !important;
}

#3. Result

#4. This button will be inherit the Secondary Button Style, so you can adjust the style in Site Styles.