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. 

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

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! 

 

Link to comment
  • tommiatke changed the title to Burger/Mega Menu Navigation Split Column, Custom Image Headers
  • Replies 5
  • Created
  • Last Reply
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 

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.