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

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

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

#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>
    $('footer.sections section:nth-child(2)').insertBefore('.header-menu-cta');
/* unset section height */
div.header-menu section {
    min-height: unset !important;

We will have

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

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

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

1 Like

Looks awesome, thank you so much for sharing your wisdom with us, Tuan! :clap:t2:

1 Like

Fixed some error with code.

1 Like