Alternative to Mega Menu in Mobile view

Hi

I’m looking at options to create a site layout that looks good on Mobile as it does with tablet and desktop views. Mega Menu is fine overall, and I appreciate the work that’s gone into it … but I’m finding that the mobile layout just doesn’t work with what I’m aiming for.

Because Mega Menu doesn’t look the way that I’m wanting it to, I figured it was best just to hide that stack in mobile view then drop in another alternative. It means more maintenance but it may be the only way of getting what I’m after. I looked through other vendors’ stacks offerings. There are some interesting menu stack options - but none are that great. But I then discovered that Elixir have exactly what I’m after - albeit buried in the Luna theme. It’s a mobile menu that sticky, but also small, clean and discrete.

This brings me to a question:
What’s the best way of bringing the Luna Theme menu system (at least as a mobile view alternative) into a Foundry site?

  • Do I need to create my site within the Luna theme
    (which may mean dumping Mega Menu entirely)? OR

  • Is it possible to get Luna’s mobile menu as a separate stack that I can drop into the Mobile view? OR

  • BIG ASK: Is it possible as a future request to create a “mobile minimized” option within Mega Menu that resolve the two issues highlighted above? Having everything within the same menu system is ideal - but I fully understand if this isn’t possible or practical (as putting too many options into a product can make it overly-complicated and bloated).

I’m keen for any feedback, suggestions, and am curious if is something that other developers have come across.

I assume you’re referring to the Lunar theme, correct? If so, that is not a possibility. You cannot bring the Lunar theme’s navigation into Foundry.

Foundry can only be used with the blank Foundry theme that comes with your purchase. You cannot use it within other themes like the Lunar theme. The blank Foundry theme contains some of the necessary code for the Foundry stacks.

No, the navigation for the Lunar theme is hard coded into the theme itself.

You can set your Banner stack to be larger at the mobile breakpoint, add more content to the banner, etc. You can also place the navigation outside the Banner stack, above it. Any or all of these will resolve that.

This is simply a limitation of the way a sticky navigation works. The reason you’re not running into that with the Lunar theme’s navigation is that the navigation isn’t set to be sticky at all breakpoints. A sticky navigation is not meant to scroll. If it did it would not be a sticky navigation.

I can look at other possible navigation stack styles for the future, but I can’t make any promises at this moment.

2 Likes

Hi Adam

Thanks for the quick reply.
Yes, you’re right - it was the Lunar theme I was referring to.

At the end of the day I’m just looking for mobile menu system that’s small and discrete, but easy to find and to use. For me, that means:

  1. Having it limited to just the hamburger symbol. In my view it doesn’t really need to stretch across the full horizontal width. The aim is to have a menu that’s less visually intrusive and leaves more space for content.

  2. Having it made “sticky” if possible. That means that the menu is always easy to find and just a click away. For me that’s important as my planned webpages are long articles or guides. Anything I can do to minimise scrolling on mobile devices is good.

  3. Support for long submenus. As my site is a travel guidebook with over a dozen cities/towns then there’s always going to be a long list. Potentially I could make that list into a hierarchy with fewer entries per submenu, but an aim of my site redesign is to reduce having items buried several levels deep in menus.

If there’s anything in there that provides or reinforces your existing ideas for future enhancements then that’s great. In the meantime I’ll experiment more.

Cheers

If it helps provide context - this is the menu system on the site I’m replacing (admittedly the content will be moved around). The menu system was one of the few things that worked well IMHO on the site. It was small and discrete - yet allowed for a lot of content that fit onto a mobile screen. This is important for sites that go past the 4-5 pages which are typical of most product or portfolio websites.

Having submenus display content horizontally was quite useful although I realise it mightn’t be to everyone’s tastes.

I ´ve gone through the same experience with mega menu (not scrollable when sticky). my workaround was to hide mega menu on mobile and use the nav bar stack instead. In general, I don´t like these kind of workarounds…

couple of days ago I 1LD released an interesting menu stack
https://onelittledesigner.com/rapidweaver-stack/clean-menu/
which seems to be pretty customisable.

Although I haven´t tried it yet, it might be worth a look. maybe the stack helps in setting up the menu the way you want – for all devices with just one menu stack.
(if you try it, please let us know about the result!)

3 Likes

Thanks for the workaround suggestion.

I had a brief look at the 1LD Clean Menu stack, plus Yuzool Navigator stack. They look okay but I was unsure still about the overall look plus the inconvenience of maintaining two menu systems. I may resort to it … although I can probably make Mega Menu work in the interim via a restructure.

On the positive side, Foundry plus add-on packs makes it really easy to do most other things. :slight_smile:

Some of the things you’re looking for are contradictory unfortunately. If you want the navigation itself to be sticky you’re going to run into problems with long navigation systems on mobile devices. There’s only so much room on a mobile device screen and it gets even smaller when people turn that device horizontally.

1 Like

I think you’re right to some extent. In hindsight my old menu system wasn’t sticky, and I ended up minimising manual scrolling through having an Elevator stack that quickly took users back to the top of the screen. Whatever I come up with is going to need to be a compromise.

Maybe I’m just a typical end-user who doesn’t quite know what they want.
But at least RW makes it easy to experiment. :slight_smile:

Cheers