(Squarespace) Custom Content to Burger Menu (Use Not Linked Page)

Pro Tips Other Tips
1

I wrote a tip on adding custom content to the burger menu, using Footer Sections. But it is sometimes a bit inconvenient to add a section to the footer, so in this tip, I will show you how to use content from Not Linked Page.

Require:

How to
#1. Install Plugin
#2. Create a Not Linked Page and design your content (you can also use Page in Main Navigation)
Suppose we will create page with

#3. Add this code into Settings > Advanced > Code Injection > Footer (or Website > Website Tools > Code Injection > Footer)

<div data-wm-plugin="load" data-target="/custom-burger"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.wm-load-container').insertBefore('.header-menu-cta');
});
</script>

This code will add content between Nav Items/Social - Button

image
image436×717 32.3 KB

#4. Add this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

/* Fix custom burger appear on top of site */
.wm-load-container {
    display: none !important;
}
header#header .wm-load-container {
    display: block !important;
}

Custom Content will appear at the top of the site for 1-2 seconds then disappear. This CSS will fix this.

1 Like