I’m using MegaMenu for the first time and I generally like it. I’ve got a dropdown all nicely formatted with a bunch of links in two columns. It looks great. But when I simulate it on mobile, it wouldn’t scroll down to see the items later in the second column. I suspected this is because “sticky” is on. Indeed if I turn off sticky, it works as you’d expect. Can anyone tell me if this will persist once deployed? Does “sticky” only for short menus? Is there a way to turn off sticky just for mobile?
Then I thought to check the demo website Mega Menu | My Website and it seems the more complicated dropdowns there also break on mobile. Maybe because they are sticky too? On the demo page, pulled up on my phone, the first drop down works as it should. (You can open it, see the links. When you click it again it collapses.) But the second and third dropdowns are both broken. You can’t see all the links, they mess up the banner, and you can’t close the navigation item once you touch it. Am I missing something or am I write that these two items don’t display properly in the demo? Is this a “sticky” issue?
I love the look of the two column dropdown menu, but I need “sticky” and that throws the responsiveness off. Thoughts?
A navigation bar that is “sticky” means that everything that is associated with the navigation, including drop-downs, are stuck in place and don’t scroll. You’ll need to account for this in building out your navigation items. You’ll want to test on several devices to make sure your design is fitting on things like an iPhone and iPad, etc. and if not adjust the contents of your navigation appropriately. It is all part of the process of building a responsive site.
Generally I would say that sticky navigations are better suited to simpler navigation setups for the most part.
Looks like something went awry with the test upload. probably something I did. I’m not at the desk today (taking a sick day as I’ve come down with a bit of a cold), but I’ll look at the demo site when I can. That said the demo was just to show some of the possibilities. Ideally when I would build a navigation I’d likely hide those larger sections of content in the drop downs and have something more simplified for mobile using the Visibility stack.
You’re not going to be happy with a multi-column layout for a drop down when using a sticky navigation. It is not going to work as you want it to.
Quick update – the drop downs opening upwards seems to be a bug. Not sure if this is something that has come about in more recent versions RW, or something else, but will try to take a look as soon as possible.
Addendum: Seems to behave differently in different browsers, too.
Actually, I quite like the multi-column layout sticky. I’ve got it looking really nice. I just wish I could turn off sticky for mobile only. Otherwise, I think I do have to give up on sticky for all of it. because I like it for desktop and tablet.
Dragged into the office to look at this, and I’m not seeing it in Preview Mode, or when I do a “Preview In…” to an external browser, so I’ll have to determine if it is a Mega Menu bug or a browser bug, or a RW bug, etc.
This works. I’ll let Adam say if it is a bad idea. But here’s what I did. Because the nav is paired with the banner, I have to make two banners, one paired with a sticky nav and one paired with a non-sticky nav. Then I put each into a visibility stack and, Voila! It works!
You’re doubling up all of that content on the page. You’re loading two banner and two navigations every time the page loads. It is up to you if that is something you want to do or not. That is a separate discussion aside from that of the possible bug within the stack though.
Hmmm. That sounds like a bad idea. I think if I were a better developer, instead of being one week into my web design career, I’d have a better sense of how much I’m pushing it. It’s a photography site so it is image-heavy already. A second banner seems like a small addition (on a percentage basis). But to my newbie’s ears, that sounds like a newbie thing to say. I think I’m supposed to be shaving bytes everywhere regardless. I’m going to finish the site unsticky, then see if I can figure out how to gauge the relative merits later.
I think I tracked down what is causing the navigation to expand upwards in some browsers at the mobile breakpoint. I’ll look at working on a fix for this and then testing against several browsers.
If you clear your browser cache and revisit the sample page you should see the paired navigation opening downward now instead of upwards on mobile devices at the mobile breakpoint.
I’ll get that fix pushed out in the next update for Potion Pack.
because I like it for desktop and tablet.