(Squarespace) Custom Fullscreen Burger Menu

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://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



You can design whatever you want, here is just a random design for me to write.

#2. Next, change Header Layout to this

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

@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;
}
}

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

@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

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.

Is it possible to add the hamburger menu alongside the regular menu? Example. I definitely want to keep my cart icon in my standard header.

I will work on this more tomorrow, but here is my website in case it is helpful.

1 Like

To make menu appears, you can remove this red line

to make icon appear, remove this red line

1 Like