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! 

Hi. Have you solved this yet?

19 hours ago, tuanphan said:

Hi. Have you solved this yet?

Hi @tuanphan

I would absolutely love some help! 

Hopefully the above description of what I want to achieve still helps. 

Thanks

Tom

On 2/14/2021 at 12:31 PM, tuanphan said:

Hi. Have you solved this yet?

Hi @tuanphan, In the spirit of continuing this on, attached is a screenshot of where I am up to. 

Still a few things to go:

• Splitting the Nav list into 2 columns of text (at least thats the way I'd imagine, but happy to hear of better/alternate ways of having 2 navs) 
• Making the 2nd column a dark blue colour (with the links in white) 
• Having the 2 logos above each column of links

This is the code so far:

@media screen and (min-width:950px) {.header-nav , { display: none!important} .header-burger { display: contents!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;width: 40%;} .header-menu .header-menu-nav a { font-size:20px; padding: 15px; text-align: left!important; justify-content: normal; }
}

@keyframes slide-from-left{ from {top:0%; right: 100%; opacity:0;} to {right: 0%; opacity:1}} .header--menu-open .header-menu  {animation-name: slide-from-left; animation-duration:1s} 

.header--menu-open .header-menu {box-shadow: 10px 10px 60px rgba(0,0,0,0.18); 
}

.header-menu-nav-folder .header-menu-nav-folder-content {justify-content: normal; }

Thanks again 

Tom 

Hi there, 

Is there any possibility of this becoming a reality? Please let me know if this is possible 🙂

Thanks 

Tom 

Any help here would be much appreciated. Sorry to bother everyone!