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.

Hello, I was able to create the second button but it made my site pages become too wide to fit on my screen; making the user have to scroll to see the entire page. Any ideas how to fix that? Thanks!

Link to my site:

lagsgvapi.org

I tried it fine on my end (Windows/Chrome). Do you have a screenshot of problem on your end?

Thank you for responding! I was able to figure it out. Though, now I am struggling to get rid of this button I made at the bottom left of the site. It displayed on every footer on every page as well as on mobile when you scroll to the bottom. How do I hide the bottom left button only? Whenever I try to hide the “Become a member” button it also hides the top one, which I want to keep. Thanks!

Have you added code in step #2 yet? That code should hide button in bottom of site

That worked! Thank YOU!

I’m having trouble adding a second button - It appears, but it doesn’t allow me to attach a link

You can enter Link here