Problem with scrolling on mobile

  • Resolved roeeyracing1

    (@roeeyracing1)


    7 years, 2 months ago

    Hello

    I’m using the Max Mega.

    I built a sticky section to mobile (aligned to top with elementor) and in inside one of the columns there is Max Mega mobile menu.

    Scorlling in regular mode is OK but when I turn the phone into landscape then I cannot scroll to the bottom.

    I added this code to the styling options and it didn’t help.

    @include mobile {
    #{$wrap} #{$menu} {
    max-height: 500px;
    overflow: auto;
    }
    }

    Any Idea ??

    Thank you!

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

    (@megamenu)

    7 years, 1 month ago

    Hi roeeyracing,

    Please can you post a link to your site so I can take a look? If your screen height (landscape) is smaller than 500px (which is quite likely) then you won’t be able to get to the bottom of it.

    Thread Starter roeeyracing1

    (@roeeyracing1)

    7 years, 1 month ago

    Thank you

    I solved it like this

    @media only screen and (max-width: 1026px) and (min-height: 400px) {
    #mega-menu-wrap-primary #mega-menu-primary {
    max-height: 400px !important;
    overflow: auto !important;
    }}

    @media only screen and (max-width: 1026px) and (max-height: 399px) {
    #mega-menu-wrap-primary #mega-menu-primary {
    max-height: 200px !important;
    overflow: auto !important;
    }}

    Thanks for the help ! by the way my solution seems alright ?

    Plugin Author megamenu

    (@megamenu)

    7 years, 1 month ago

    Hi Roeey,

    Yes, looks good.

    If you’re confident and like playing around with CSS then you could also use viewport units combined with calc, something like:

    #mega-menu-wrap-primary #mega-menu-primary {
    max-height: calc(100vh - 40px);
    overflow: auto;
}}

    (where the 40px accounts for the height of anything – apart from the menu – that gets stuck at the same time).

    Thread Starter roeeyracing1

    (@roeeyracing1)

    7 years, 1 month ago

    Dear sir so I’ve came back to you in the same post with hope you will able to help me.

    So I do not know what’s happened a long the way but any style I target @media only screen and (max-width: 1026px) does not hit the target. I work via external css file in my child theme which is loading fine and affect other parts on the site but can not target the max mega menu.

    For example if I type :

    @media only screen and (max-width: 1026px) {
    #mega-menu-wrap-primary #mega-menu-primary {
    max-height: calc(100vh – 40px) !important;
    overflow: auto !important;
    width:100% !important;
    }}

    Btw if I put the same style inside the “custom style” offered within the plugin it does work.

    I can not understand 🙂

    • This reply was modified 7 years, 1 month ago by roeeyracing1.
    Thread Starter roeeyracing1

    (@roeeyracing1)

    7 years, 1 month ago

    Managed to fix it. Thank you

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Problem with scrolling on mobile’ is closed to new replies.