Scroll issue with Elementor mega menu on mobile

  • Resolved revolution404

    (@revolution404)


    5 months, 2 weeks ago

    Hello,

    I’m using max mega menu in my sticky Elementor header and I’m experiencing difficulties getting optimal display and behavior on mobile.

    Here’s my problem:

    Currently, I’m using this CSS code:

    #{$wrap} #{$menu} { max-height: 70vh; overflow: auto; border-bottom: 2px solid #262626; }

    I’ve tried several configurations, but none give me the desired result:

    1. With max-height: 70vh: The scroll works correctly, but the menu only occupies 70% of the screen height, which isn’t aesthetically pleasing.
    2. With max-height: 100vh: The menu occupies the full height, but there’s a scrolling problem. The search bar at the bottom isn’t visible, and there’s a jerk at the end of the scroll.
    3. With min-height: The background extends to 100% of the height (which is what I want), but the scrolling problem persists.

    Here are some screens of the situations #1 and #2 :

    Bug?

    What I’m looking for:

    • When clicking on the menu, it opens full screen, especially in height.
    • All menu elements are visible and accessible.
    • You can scroll smoothly to the last menu item (search bar included, which an independant element in my elementor header).

    The version with 70vh works more or less, but the menu display not reaching the bottom of the screen is unsatisfactory.

    Do you have any suggestions to achieve the desired behavior?

    Thank you in advance for your help!

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

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

    (@megamenu)

    Hi,

    The link isn’t working, so I can’t give you the exact answer (and for any further help I’d need to see the site), but try adding this to Mega Menu > Menu Themes > Custom Styling:

    @include mobile {
        #{$wrap} .mega-menu-toggle + #{$menu} {
            max-height: calc(100vh - 105px); /* forces scrollbar if content overflows page */
            overflow: auto;
        }
    }

    Adjust the 105px value so that it matches the height of your header.

    Regards,
    Tom

    Thread Starter revolution404

    (@revolution404)

    Thank you very much.

    It is exactly what I needed.

    For some reason, 105px was the good call.

    Have a nice day

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.