Add Gallery to Squarespace Header

Pro Tips Other Tips
1

I will share some steps to add Gallery (Gallery Section, Gallery Block) to Squarespace Header, by using code or use plugin
Option 1. Use Code
(1) First, you need to add a Gallery Section under Header
(2) Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer. The code will move Gallery Section above Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('article>section:first-child').insertBefore('header#header');
})
</script>
<style>
header#header {
   position: relative !important;
}
div#siteWrapper>section {
    padding: 0px !important;
    z-index: 999999 !important;
}
</style>

If you want the code affect on One Page only, just move the code into that Page Header Code Injection.

Option 2. Use Plugin
The advantage of using a plugin is that you can use the Gallery Section from the Not Linked Page, without inserting it below the Header.
(1) First, install Section Loader Supreme Plugin (affiliate link) or this link (non-affiliate link)

(2) Create a Not Linked Page > Add a Gallery Section with

  • Name: any names, eg: Gallery
  • URL: /above-header

(3) Add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout( function() {
        	$('div.wm-load-container').insertBefore('header#header');
    }, 2000);
});
</script>

and this code to Code Injection > Header

(4) Add this code to Website Tools > Custom CSS

header#header {
    position: sticky !important;
  	position: -webkit-sticky !important;
    top: 0;
}
/* section above header */
.wm-load-container>section:first-child {
    display: none;
}
.wm-load-container .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
}

If you want to apply to one page, just move (3) code to Page Header Code Injection.
If you use Basic/Personal Plan and can’t add to Code Injection, you can comment below, I will adjust code for your case.
If you find it difficult and need to install, you can message me, I can help you (free).

2 Likes
2

Tuan, thanks a ton for this outstanding tutorial! :fire: