Split Nav Overlay Into 2 Columns?

Looking to do a split overlay navigation (similar to the attached image) for my site (https://www.alltradescreative.co/) Basically I want the navigation links on one side, and a slideshow of photos on the other side. 

Slideshow will be inside Overlay Menu, or it is a part of page content?

Inside overlay menu if possible 

It will require a lot of code, but I did a similar case a few months ago. You can see demo here: https://tuanphan.squarespace.com/burger-menu-2?noredirect

pass: abc (you need to enter twice)

First you need to add 2 Sections in Footer. Suppose it is section 3 (with 2 text blocks side by side) and section 4 (gallery section slideshow), then design your layout.

Next, use this code to Website Tools (under Not Linked) > 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.

It seems to get rid of the burger "x" to exit out and I can't seem to get the gallery to take up enough space no matter where I put it/size it. 

Since it won't work on mobile (not needing it to), I also wonder if there's a way to hide the original nav links on desktop only. Otherwise they still pop up as the desktop nav overlay is transitioning. I don't want to hide them completely, otherwise nothing will show up in the nav on mobile. 

To fix X disappear, add this code under

@media screen and (min-width:768px) {
header#header {
    z-index: 9999999999;
}
.header-menu {
    display: none !important;
}
}

Hide nav on desktop: Which nav are you referring to? I see burger only

I had links in the main navigation panel but they were flashing as the split screen overlay was appearing. That seems to be a non-issue now. 

Any fix on the size of the gallery? My working homepage is alltradescreative.co/home and I also notice a gap between the page and the nav overlay

I'll also need to hide those 3rd and 4th footer sections on mobile 

On 1/5/2024 at 9:25 PM, AllTradesCo said:

I had links in the main navigation panel but they were flashing as the split screen overlay was appearing. That seems to be a non-issue now. 

Any fix on the size of the gallery? My working homepage is alltradescreative.co/home and I also notice a gap between the page and the nav overlay

I see you use Gallery Block Slideshow, you can consider using Gallery Section Slideshow, it should fullheight without code

Or you can change it to Classic Editor Section? I can fix with code easier

with new editor, it always have a gap under, difficult to fix it

To hide 3, 4 sections on mobile, use this CSS code

@media screen and (max-width:767px) {
	footer.sections section:nth-child(n+3) {
		display: none !important;
}
}

I may be missing it, but it seems I'm unable to do a gallery section in footer. I adjust sections 3 and 4 to be classic editor. This sizing on the gallery is better, but still have that gap.

I've updated my URL and adding an announcement bar, so not concerned about the gap if it's too difficult to fix. Overall much better, just wanting that gallery to go edge to edge if possible https://blueriverstudio.co/

Use this CSS code

footer.sections section:nth-child(3) .content-wrapper, footer.sections section:nth-child(3) .gallery-block {
    padding: 0px !important;
}

Perfect, thank you so much!