Burger/Mega Menu Navigation Split Column, Custom Image Headers

Site URL: https://tangerine-crane-czyb.squarespace.com

Hi all, 

I have a coding question I'd like to submit. My client wants to create a site for their primary business (called CMF) that includes their sister business (called CSMM). They would like the site to be primarily based on CMF, but to include CSMM and have the relevant pages coloured/themed around that business. So for CMF for example, its a white background site, but for CSMM we will have a dark blue header etc. They would also like the CSMM to have their own navigation links, so it has the appearance you are viewing CSMM as individually (Which Ive begun, and is working ok atm). 

In order for this to happen, but in a nice and relatively succinct way, Id like to create a 'fly-in' navigation box, that hosts both the navigations for CMF and CSMM. On the site it would appear as a burger/'Menu' menu, and once clicked would display a 2 column menu/nav box, on the left would be the links for CMF, and on the right would be the links for CSMM (also with social links, but not as imperative). Ideally I would also like to have the CSMM logo above those links as well, so the viewer can clearly identify that those links belong to that portion of the site. 

I have attached a mockup of what I would like to achieve, and any help would be greatly appreciated. I see your name a lot @tuanphanso I apologise for the tag. 

Ive seen a few tutorials and articles on the web to create a singular nav box (This here is one Ive followed: https://insidethesquare.co/squarespace-tutorials/full-screen-menu which worked for the main portion), but wanting to go beyond this and see if its possible. 

MY SITE: 
https://gecko-oriole-s2y2.squarespace.com/ • Password: cm

EXAMPLE:
https://nayatraveler.squarespace.com/journeys-peru-walking - This one is great, but I dont need the full image as well. 

Any help would be greatly appreciated!