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

**URL:** <https://community.elfsight.com/t/squarespace-custom-content-to-burger-menu-use-footer-section/18190>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [August 8, 2023, 4:15am UTC](https://community.elfsight.com/t/squarespace-custom-content-to-burger-menu-use-footer-section/18190 "2023-08-08T04:15:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [August 8, 2023, 4:15am UTC](https://community.elfsight.com/t/squarespace-custom-content-to-burger-menu-use-footer-section/18190/1 "2023-08-08T04:15:28Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/7658c6428a5a52daa7160f961d407632f5675559.png)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/7b9b445a0e365c3cb78e00fd6dc98fa8b8ad1b3c.png)

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

```auto
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

```auto
<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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/7658c6428a5a52daa7160f961d407632f5675559.png)

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 8, 2023, 8:37am UTC](https://community.elfsight.com/t/squarespace-custom-content-to-burger-menu-use-footer-section/18190/2 "2023-08-08T08:37:03Z")

</div>

Looks awesome, thank you so much for sharing your wisdom with us, Tuan! 👏🏻

---

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [August 9, 2023, 7:52am UTC](https://community.elfsight.com/t/squarespace-custom-content-to-burger-menu-use-footer-section/18190/4 "2023-08-09T07:52:58Z")

</div>

Fixed some error with code.