Mega Menu not showing on mobile devices
June 10, 2016 at 8:06 amPosts: 42Member Reply #6556
I am considering including this Mega Menu on my website:
However, when I try it on a smartphone the Mega Menu does not show up. It also completely disappears in Chrome when I reduce the window size. Is this intended? I checked the source code and found some comments, but it is not clear to me what the correct way is to ensure the menu is always accessible.
By the way, my top menu will always be relatively empty, so there should always be sufficient space for an icon or “Menu” text or similar.
June 10, 2016 at 6:12 pmPosts: 4527Support Staff Reply #6568
In this layout there are 2 menus, horizontal and sidebar. But on mobile view you will need to replicate those 2 menus using single toggle mobile menu. So you will have 2 navigations: one for desktop and another for mobile view. Or if you were asking anything else please let me know.
June 12, 2016 at 8:02 amPosts: 42Member Reply #6578
Thank you for the response and sorry for the late reply (I forgot to click email notification).
On desktop that example works exactly as I expect: I have one toggle for the sidebar menu (the hamburger icon) and one for the horizontal drop down menu (text: “Classic”).
On mobile I only see a toggle for the sidebar menu (the hamburger icon). I would like a separate toggle for the horizontal drop down menu here as well. It could be text: “Classic” or an icon, does not really matter, just a way to independently bring up the sidebar menu or the drop down menu (just as on a desktop). Could you please point me in the right direction?
June 12, 2016 at 3:12 pmPosts: 4527Support Staff Reply #6587
Thanks for your clarifications. At the moment separate toggle mobile menus are not available. But we will implement this in the upcoming Metroniv v5.0 update where we will add other new features that never seen before 🙂 Stay tuned!
June 12, 2016 at 3:19 pmPosts: 42Member Reply #6588
Sounds promising, looking forward to that! 🙂
June 12, 2016 at 3:23 pmPosts: 4527Support Staff Reply #6590
We will do our best to bring it asap 🙂
June 12, 2016 at 4:21 pmPosts: 42Member Reply #6591
No rush from my side. I have hundreds of things to improve on my website in the meantime anyway… 🙂
June 12, 2016 at 4:50 pmPosts: 4527Support Staff Reply #6592
Noted. Good luck with your projects 🙂
June 23, 2016 at 6:36 pmPosts: 19Member Reply #6779
Have the same problem, so that’s why. Anyway, looking forward to the next version!
July 14, 2016 at 10:15 amPosts: 42Member Reply #7120
I downloaded the new v4.6 release, but seems this issue is still there. However, there are quite a few changes in the ChangeLog, so not sure if this has been addressed somehow. Could you please advise?
July 15, 2016 at 6:06 amPosts: 4527Support Staff Reply #7133
Actually this is not an issue. This just needs some improvements in order to avoid using 2 separate menus for desktop and mobile. At the moment we haven’t attended to this yet. But we will try to attend to this in a future releases as soon as possible. At the moment you will need to have separate menus for desktop and mobile versions.
July 15, 2016 at 9:01 amPosts: 42Member Reply #7137
Thanks for the reply!
I’m not sure how to configure two separate menus for desktop and mobile, so I will probably wait for the next release. Looking forward to that! 🙂
July 17, 2016 at 2:22 pmPosts: 4527Support Staff Reply #7153
That should be quite straightforward if you refer to the working demo:
The desktop version of the menu is under ” BEGIN SIDEBAR ” commented section.
T!he another menu for the mobile version is under ” BEGIN RESPONSIVE MENU FOR HORIZONTALSIDEBAR MENU ” commented code section. You just need to populate the 2 menus with similar structure but using different markup. That should work without an issue. If we release the optimized menu in the future you can easily update your code then
If you need any further clarifications please let us know.
- This reply was modified 2 years, 7 months ago by Sean.
July 19, 2016 at 7:16 pmPosts: 42Member Reply #7183
Thank you for the reply. I wanted to look at this now, but not sure I understand what you mean by ‘… commented code section’. Looking at the source code and searching for “Full Mega” I see two occurrences: on row 173 and on row 3113, but not sure how to proceed.
When I open the URL in Chrome on a desktop, I see 4 menus: Active, Mega, Full Mega and Classic.
When I open the URL in Chrome on a smartphone, all 4 menus disappear. There is a hamburger icon, but that links to the sidebar menu (I still need that one). How can I make these 4 menus appear on mobile? In case they don’t fit on the screen, will they be collapsed into another icon or a “top menu” text?
You must be logged in to reply to this topic.