# (Squarespace) Custom Fullscreen Burger Menu

**URL:** <https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [August 11, 2023, 9:56am UTC](https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 "2023-08-11T09:56:48Z")\
**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 11, 2023, 9:56am UTC](https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276/1 "2023-08-11T09:56:48Z")

</div>

Today I will guide you how to create a fullscreen burger menu on desktop (7.1 version). See demo in below screenshot  
 ![fullscreen-burger1-min](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/1/1f1327a4ca6d6fdd83124de46d63c94c59778c63.gif)  
[https://tuanphan.squarespace.com/burger-menu-2?noredirect](https://tuanphan.squarespace.com/burger-menu-2?noredirect)  
pass: abc  
(here not include image change on hover text effect, if you need this effect just share your site url, I can tweak code for your case)

**#1.** First you need to add 2 Sections in Footer. Suppose section 3 and 4  
then design your layout

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/1/14e22442d14b32fa5bfde765f075ba96d326c908.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/d/df317a398b0f2282b06b7e2cadd449ebcfc41051.jpeg)  
You can design whatever you want, here is just a random design for me to write.

**#2.** Next, change Header Layout to this

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

**#3.** Use this code to **Design \> Custom CSS (or Website \> Website Tools \> Custom CSS)**  
This code will force Burger Icon appears on Desktop.

```auto
@media screen and (min-width:768px) {
.header-burger {
    display: flex !important;
    justify-content: flex-start !important;
}
.header-nav {
    display: none;
}
.header-actions-action {
    display: none !important;
}
.header .header-announcement-bar-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/0/02e2dd8d94825156af32a324d0700a676d0eee98.jpeg)

**#4.** Next, add this to Design \> Custom CSS or Website \> Website Tools \> Custom CSS

```auto
@media screen and (min-width:768px) {
    /* Fix footer invisible behind page content */
footer.sections {
     z-index: 9999999 !important;
 }
/* change footer 2 sections to 100% height and 50% width */
footer.sections section:nth-child(3), footer.sections section:nth-child(4) {
    width: 50%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    left: 0;
}
footer.sections section:nth-child(3) {
    left: 0;
}
/* move footer section 4 to right 50% */
footer.sections section:nth-child(4) {
    left: 50%;
    right: 0;
}
/* disable scroll when burger menu is open */
.header-burger--open body {
    overflow: hidden;
}
/* effect on 2 sections when click burger menu */
  body footer.sections section:nth-child(3), body footer.sections section:nth-child(4) {
    transition: transform 1.2s ease;
      top: 50px !important;
}
body footer.sections section:nth-child(3) {
    transform: translateY(-150%);
    transition: transform 0.75s ease;
}
body footer.sections section:nth-child(4) {
    transform: translateY(150%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(3) {
    transform: translateY(-0%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(4) {
    transform: translateY(0%);
    transition: transform 0.75s ease;
}
}

```

Note: 50px in top: 50px !important; is space between 2 sections with bottom of header. You can adjust this value.

**#5. Extra**  
If you want to add Dropdown Menu, you can use Accordion Block and use this CSS to remove border, background around accordion items

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/d/d25e5fc41e4f18c08b202cbba31728b330683a7b.jpeg)

```auto
header#header .accordion-divider {
    display: none !important;
}
header#header .sqs-block-accordion .accordion-item__click-target {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

```

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

---

<div class="post-metadata">

**Author:** ![Jennifer\_Terpstra](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/jennifer_terpstra/32/18194_2.png) [@Jennifer\_Terpstra](https://community.elfsight.com/u/Jennifer_Terpstra)\
**Post date:** [February 8, 2024, 3:52am UTC](https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276/2 "2024-02-08T03:52:26Z")

</div>

Is it possible to add the hamburger menu alongside the regular menu? [Example](https://ohsierra.ca). I definitely want to keep my cart icon in my standard header.

I will work on this more tomorrow, but [here is my website](https://jenterpstra.com) in case it is helpful.

---

<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:** [February 8, 2024, 4:04am UTC](https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276/3 "2024-02-08T04:04:15Z")

</div>

To make menu appears, you can remove this red line

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/b/cb96afbfb85d37b2ae58fb96b2931a8397a8dcba.png)

to make icon appear, remove this red line

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/6/f65d103cd201a326fb15bda419631730aa3088ba.png)