Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Burger/Mega Menu Navigation Split Column, Custom Image Headers


tommiatke

Question

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! 

 

Edited by tommiatke
Update title
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0
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

Edited by tommiatke
Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...