This topic contains 15 replies, has 3 voices, and was last updated by Sean Sean 1 year, 7 months ago.

Mega Menu not showing on mobile devices


  • shopcomp
    Participant

    Posts: 42
    Member Reply #6556

    Hello,

    I am considering including this Mega Menu on my website:

    http://www.keenthemes.com/preview/metronic/theme/admin_1/layout_mega_menu_light.html

    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.

    Best regards

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #6568

    Hi,

    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.

    Thanks.


    shopcomp
    Participant

    Posts: 42
    Member Reply #6578

    Hi,

    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?

    Best regards.

    • This reply was modified 1 year, 8 months ago by  shopcomp.
    • This reply was modified 1 year, 8 months ago by  shopcomp.
    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #6587

    Hi :),

    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!

    Thanks.


    shopcomp
    Participant

    Posts: 42
    Member Reply #6588

    Sounds promising, looking forward to that! 🙂

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #6590

    We will do our best to bring it asap 🙂


    shopcomp
    Participant

    Posts: 42
    Member Reply #6591

    No rush from my side. I have hundreds of things to improve on my website in the meantime anyway… 🙂

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #6592

    Noted. Good luck with your projects 🙂


    XanaduDev
    Participant

    Posts: 19
    Member Reply #6779

    Have the same problem, so that’s why. Anyway, looking forward to the next version!

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #6783

    Sure. Noted 🙂


    shopcomp
    Participant

    Posts: 42
    Member Reply #7120

    Hello,

    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?

    Best regards

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #7133

    Hi :),

    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.

    Thanks.


    shopcomp
    Participant

    Posts: 42
    Member 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! 🙂

    Best regards

    Sean
    Sean
    Keymaster

    Posts: 4221
    Support Staff Reply #7153

    Hi :),

    That should be quite straightforward if you refer to the working demo:
    http://keenthemes.com/preview/metronic/theme/admin_1/layout_mega_menu_light.html

    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.

    Thanks.

    • This reply was modified 1 year, 7 months ago by Sean Sean.

    shopcomp
    Participant

    Posts: 42
    Member Reply #7183

    Hello,

    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?

    Best regards,

     

    • This reply was modified 1 year, 7 months ago by  shopcomp.
    • This reply was modified 1 year, 7 months ago by  shopcomp.
    • This reply was modified 1 year, 7 months ago by  shopcomp.

You must be logged in to reply to this topic.