I’m wondering if a navigation system can be constructed with Foundry that looks like the attached image. In this system, there would be a hamburger menu that when clicked would display the full-width drop down below the navbar?
I thought I could do this with the MegaMenu stack but it does not look possible, but I could be wrong.
If you add a Drop Down child stack and click on the Drop Down child stack, there is an option under Advanced for Full Width Droped Down. You and then add a Drop Zone child stack and place columns in this area. Then you can add any content that you need. The hamburger menu option is not an option though.
OK, thanks I’ll give that a try and try to figure out a way around the hamburger problem.
What you’re looking to accomplish isn’t a navigation style that isn’t really supported by any of the navigational stacks within Foundry or its addons unfortunately. The suggestions that @Steve_J gave you are definitely close to what you want, but you’re not going to be able to replicate the exact layout you want with the Foundry navigation stacks.
Yes, I suspected that I tried Steve’s suggestion and I can get fairly close but not nearly as clean as what I’m currently using, which is Clean Menu from 1LD. It is working really well but it has one anomaly that I was hoping to eliminate by trying to build it with Foundry stacks.
I’ll stick with what I have as it works well in general.
1LD updated the Clean Menu stack to fix the problem I was seeing, so now this stack is working perfectly for creating this style of navigation in Foundry, highly recommended solution!
@handshaper if you look at onelittedesigner’s sample page (about the 5th sample below) you’ll see pretty much a replica of your screenshot (in light mode). Here’s the link. Highly recommended developer!
Yes, I used Clean Menu to build the sample I showed and now use it on my site. There had been a small problem with it but they fixed it and it now works perfectly. I was simply trying to see if something like this was possible with Foundry.
Just out of curiosity is there somewhere to see that particular navigation at work on a mobile display? I ask because the sample on the link provided by @ASA above seems to be a problem:
By the way I’m legit curious. Would like to see it in action!
What is the problem that you see @elixirgraphics ?
The example they give runs out of the sample “device” and on top of every other demo below it. I’d also be interested to see how it does no a small device with a looooong set of navigation items, like seen above, with it “stuck” in place to the top of the browser.
Yes, you can see it at work on my website - GEARBOX Surf
Seems to work well on my phone, it is fairly long but it can be scrolled.
@handshaper Hmmm … on my iPod Touch the menu opens up but I can’t scroll. It’s not that the scrolling is stuck. Instead once I try to scroll the menu disappears (as if I had selected something: specifically the current page). Might work on other things, not sure. But not on my iPod Touch using Safari.
It does occasionally close the menu when trying to scroll it, but typically if you drop it down again you can scroll it. Will check it on my new iPod when it arrives tomorrow!
This morning I just checked with my iPad. In landscape mode all is fine. In portrait mode (where menu goes off the bottom of screen) it does same thing as iPod Touch. Dropping down again does not work for me.
Not many folks use an iPod Touch, but several use iPads in portrait mode.
Interesting I do not have any problems with it on my iPad in portrait mode. It can close the menu when scrolling occasionally but it generally does not prevent navigating.
It seems to be the case that it closes when scrolling a certain amount or if the menu is dropped down at certain locations on the screen.
Guess I need to get the developer to look into this to see what might be going on.