Jump to content

Burger/Mega Menu Navigation Split Column, Custom Image Headers

Recommended Posts

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. 

https://gecko-oriole-s2y2.squarespace.com/ • Password: cm1449575089_ScreenShot2021-02-10at9_05_03am.thumb.png.d3143bbc43e62bce3a6007b510acfe84.png

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! 


Edited by tommiatke
Update title
Link to comment
  • tommiatke changed the title to Burger/Mega Menu Navigation Split Column, Custom Image Headers
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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 


Screen Shot 2021-02-16 at 6.53.44 am.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.