Today I will guide you how to create a fullscreen burger menu on desktop (7.1 version). See demo in below screenshot
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.
