(Squarespace) Custom Content to Burger Menu (Use Footer Section)

Pro Tips Other Tips
1

Today I will guide you how to add a custom content into Burger Menu (see screenshot)

image
image415×691 25.6 KB

#1. First, you need to create a section in Footer (suppose second section) > design your layout.

image
image1451×421 23.5 KB

#2. Use this code to Design > Custom CSS or Website > Website Tools > Custom CSS to hide this section from Footer

footer.sections section:nth-child(2) {
    display: none !important;
}

We need to use this code because, before #3 runs, the section might appear in the footer for a few seconds, before disappearing.

#3. Use this code to Code Injection > Footer to move section in to Burger Menu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('footer.sections section:nth-child(2)').insertBefore('.header-menu-cta');
});
</script>
<style>
/* unset section height */
div.header-menu section {
    min-height: unset !important;
}
</style>

We will have

image
image415×691 25.6 KB

#4. Add this code under to turn link to button

<style>
div.header-menu .html-block a {
    color: white !important;
    background-color: black;
    padding: 0.3rem 1.5rem;
    text-decoration: none !important;
}
</style>

Done. If you have any questions, just comment below.

1 Like