Mobile menu in one column only takes 50% width and content is not clickable

  • Resolved jez86

    (@jez86)


    7 years, 4 months ago

    Hello,

    I have 2 bugs on the last menu item on mobile display.

    1) I can’t make the content using all the width available, even if I put only 1 column, the width is 50%. I tried with both Standard Layout and Grid Layout. I tried to modify the css but didn’t found the solution.

    2) When you click on a menu sub-item, its like you are clicking under it, its impossible to reach the link and it makes the menu disappear. This bug is cannot be reproduced on desktop version by reducing the witdh. If I add another menu item without sub-items there’s no problem anymore.

    Thanks for your help !
    Jez

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author megamenu

    (@megamenu)

    7 years, 4 months ago

    Hi Jez,

    For 1, please go to Mega Menu > Menu Themes > Mobile Menu and set Mega Menu Columns to “1 column”.

    2 is more tricky, as you say I can’t see it on my desktop browser. It sounds like a z-index issue, so please try increasing the z-index on the menu, or reducing the z-index on the content “below”.

    Regards,
    Tom

    Thread Starter jez86

    (@jez86)

    7 years, 4 months ago

    Hi Tom,

    First I want to thank you for your quick answer.

    1) Ok, so I can’t manage to have two columns on certain menu items and only one for others… If you know a trick to do this :), otherwise it could be an interresting feature to include in a next version.

    2) I don’t think its a z-index issue because I can see the sub-menu over the content below. And its working if I add another menu item without touching the z-index.
    May be its about the event hidding the sub-menu considering that I’m clicking outside the menu because I’m under the last item. I don’t know if the “click” event is the same for mobile, if not it can explain why its working with a desktop browser.

    Regards,
    Jez

    Plugin Author megamenu

    (@megamenu)

    7 years, 4 months ago

    Hi Jez,

    It does make sense that if there is only one full width column in the mega menu, then it should display as one full width column in the mobile menu too. I will look at that in the next update.

    For the mobile menu, the click event is exactly the same on desktop and mobile. I think I may see the issue – please try going to Mega Menu > Menu Themes > Custom Styling and add the following;

    @include mobile {
    #mega-menu-wrap-main_menu {
        width: calc(100% + 30px);
        float: left;
    }
}

    Regards,
    Tom

    Thread Starter jez86

    (@jez86)

    7 years, 4 months ago

    Sounds great about the 1st point 🙂

    About your correction, unfortunately, its not working : I can’t open the sub-menus if I add the css.

    And actually I just got one thing… The problem is not present on the main page but you can reproduce it on any other page, even with a desktop browser.
    The difference between the homepage and the others is the “service bar” just under the menu. If I add it on every page, there’s no problem anymore.

    Plugin Author megamenu

    (@megamenu)

    7 years, 4 months ago

    Hi Jez,

    Ok, that makes it much easier 🙂

    Try:

        #mega-menu-wrap-main_menu {
        position: relative;
        z-index: 9999999;
    }

    Regards,
    Tom

    Thread Starter jez86

    (@jez86)

    7 years, 4 months ago

    Hi Tom,

    Thanks a lot, its working !

    Cheers,
    Jez

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile menu in one column only takes 50% width and content is not clickable’ is closed to new replies.