Mega menu navigation

I like the customization of the mega menu.

A few questions/requests:

  1. When the sub-menu drops down, the only way to close is to click the parent nav link or go to a page. I think it would be more user intuitive if the drop down closed ALSO if a user clicked elsewhere on the page
  2. I cannot find a way to have the site logo on mobile – am I missing something?
  3. A custom mobile/tablet breakpoint would be awesome – I know it breaks away from some simplicity, but mega menu is already an advanced stack…in comparison to topbar

Thanks

Hey there @kah

Currently I don’t have a plan to move away from the way this functions. This doesn’t mean I can’t look at it again in the future, but for now I prefer it working this way as it matches up with the Navigation Bar stack, among other things.

This is not a feature of Mega Menu. With there being so much going on in the navigation bar as it stands with Mega Menu I needed to be able to make a clean transition to a mobile navigation toggle for the mobile breakpoint. In doing that and allowing the different toggle alignments and such, it makes it hard to find a good way of including that logo in the very small space as well. If you have a suggestion for where it would be placed I’m open to hear it, but I tried a lot of things when I built this stack and none were good solutions.

I know it feels like I’m shooting you down a lot in this reply, and I don’t mean to, but this one isn’t one that is likely to change. I wish for the breakpoints to line up throughout Foundry, so they’re predictable and so that everything works together. Having different breakpoints throughout can lead to problems with things changing at various different times and bad interactions that would make the page feel broken. There’s more to this as well, but for now this isn’t an area I’m likely to budge on at this time.

1 Like

Thanks for your detailed explanations Adam

It is challenging when using a large logo for sure, but very easy when using a small logo such as a square logo, as many do.

Also I would second the request for an additional breakpoint or ideally a custom breakpoint for the Nav Bar collapse to mobile. This would really add a lot of flexibility to Foundry navigation which can be a compromise without this feature.

2 Likes

@webdeersign – You’ve mentioned this before and I am pretty sure I had a similar reply to the one in my post above. Custom breakpoints, which diverge from the overarching set of breakpoints found in Foundry currently is not something I am interested in pursuing.

With the Visibility feature/stack you can place an image stack above the mega menu, hide on desktop and/or tablet, link to the homepage.

1 Like

@dropgates Unfortunately, your suggestion would put the image above the navigation and push it down and further reduce the mobile screen size. The beauty of using a navigation bar is that you use the available space occupied by the nav bar - as shown in this Bootstrap4 demo.

Very true @webdeersign, great point. @kah Here’s another way to do it: Dropbox - File Deleted
Place img src in the “label”.

2 Likes

Good idea. Actually a very good idea. A warehoused image would work too.

Hides on mobile though:(

1 Like

Actually, why does it hide on mobile if the “Hide on Mobile breakpoint” (in the Plain child stack) is not ticked?

To answer my own question, the tick box really means “hide in the mobile dropdown menu”.

1 Like

I recently had the chance to watch other people using my page. I immediately noticed that it seems to be common behaviour to close a drop down menu by clicking elsewhere on the page. That’s how drop down menus in other applications work, too. People soon tried this and were irritated when it did not work.

When you say that it matches up with the Navigation Bar I must say that the behaviour of the Nav Bar should be changed, too, in my opinion.

Also, when there are anchors in large drop down menus, the menu will hide the targeted content, as it does not close either when clicking on the anchor link.

For now Mega Menu works the way it does purposefully – this is to help increase compatibility with older mobile devices and browsers. This includes the way the navigation works for the desktop and tablet breakpoints as well.

I have plans for Mega Menu in the future, but currently I’m in the process of working on a large update for Foundry. Once that is completed and that release is out and everything seems to be smooth for customers I’ll be looking at updates for other products like Potion Pack, Thunder Pack, Alloy, etc.

1 Like