Navigation help needed - two rows + mega menu

Design help General
#1

Haven’t been able to find an effective starting point to create my dream nav for a current client. Would appreciate any starting points – have watched numerous videos (and studied cloneables) and so far unable to see how I can build a two-row nav that ALSO gets integrated into a hamburger menu :frowning:

Here’s essentially what I want to emulate: https://darktrace.com/

My client’s current site (nav is pretty basic): https://www.greynoise.io/

The Figma prototype of desired nav (for style reference): https://bit.ly/3dJLxbB

  • Hover on primary nav to see dropdown trays
  • Click in body to see desired nav behavior

Thanks so much! :yellow_heart:

#2

Hello @galamega, have you started setting anything up yet? If yes, please share your read-only link.

If I am understanding your goal correctly, this should definitely be possible. Basically, I would create two divs within the navbar, each containing one row of nav items. Positioning should be easy by using Grid or Flexbox.

1 Like
#3

Thanks for the quick response @choreus!

Project link

The issue is the links in the top div don’t make it into the hamburger menu - they don’t seem to be seen as ‘nav’ elements. Haven’t built the trays yet, but want the basic mechanics working first…

1 Like
#4

@galamega, I have recorded a short video showing you the necessary steps. Basically, you will have to do a little reordering of your elements.

Let me know if you can follow along.

1 Like
#5

Thanks @choreus – that was a simple fix. And now for the mega menu…cannot seem to get my dropdown lists to go 100% viewport width so I can start building out those menus.

My working page for the new nav is ‘Nav Test Page’ – it’s a different instance of the existing nav with new classes (so I don’t mess with the existing nav until this new build is complete).

Project link (grateful if you have more time…)

#6

@galamega, here are the most important steps you need to do:

  • Make sure that every parent element, except the first one spanning the whole width, is set to position: static;
  • Set the first parent element spanning the whole width to position: relative;

The rest is pretty straight forward.

Let me know if you can follow along.

1 Like
#7

You are fabulous! Thank you :slight_smile:

1 Like
#8

@choreus – I have made a LOT of steady progress with this, everything is working as desired EXCEPT that the main nav dropdown trays are disappearing when I attempt to engage with them. I had them working (remaining open until hovering onto another main nav item), but then did something that broke this functionality. Any thoughts?

Project link remains the same – thank you in advance!
(see ‘Nav Test Page’ for nav prototype…)

1 Like
#9

@galamega Great work so far!

I’m not sure I can replicate the behaviour you’re describing. I can engage with the dropdown trays without them disappearing. One thing you can try though, is to increase the Close Delay from 50 ms to 300 ms for example. You do this here: Element Settings > Dropdown Settings. Does that help?

1 Like
#10

@choreus I got everything working as desired - thanks again for all your help! :star: :yellow_heart: :pray:

1 Like