Dropdown menu under Custom Link not scrollable

  • Resolved theppesupp

    (@theppesupp)


    8 months ago

    Hi, I’m using Mission News and I’ve added a Custom Link as a parent menu item called “Categories,” with multiple subcategories nested under it. On mobile (hamburger menu) the dropdown does not scroll — only a few items are visible and the rest are cut off.

    I’ve tried rearranging the menu, using Pages instead of a Custom Link, and keeping menu tiers within the theme’s 3-tier limit, but the issue persists.

    Is there a way to make a dropdown under a Custom Link scrollable on mobile without breaking the theme’s menu functionality? Or is this a known limitation of Mission News?

    Thanks in advance 

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    8 months ago

    Hi there,

    Thanks for getting in touch about this.

    Please try adding the following CSS and let me know if it resolves the issue for you:

    @media all and (max-width: 799px) {

      .menu-primary {
        height: 100%;
      }
      .menu-primary-items .sub-menu {
        overflow: auto;
        height: 100%;
      }
    }

    You can copy and paste this into the Custom CSS section in the Customizer (Appearance > Customize), and it will take effect right away. You may need to clear both your site’s cache and your mobile device’s browser cache to ensure this new code runs on the site.

    Thread Starter theppesupp

    (@theppesupp)

    8 months ago

    Thank you for your help Ben, works as it should now

    Thread Starter theppesupp

    (@theppesupp)

    8 months ago

    Hi Ben,

    Thanks for the CSS — it helped make the dropdown scrollable. However, there’s still a small issue

    • When I scroll all the way to the bottom, it stops slightly before the last item, and I have to swipe again to see the rest.
    • The same happens when scrolling back up — it doesn’t reach the very first item in one smooth motion.

    It seems like a scroll inertia/momentum issue, where the menu doesn’t fully scroll in a single swipe. Is there a way to adjust the menu so it scrolls smoothly from first to last item in one motion on mobile, without cutting off content or requiring extra swipes?

    Thanks again for your help!

    Theme Author Ben Sibley

    (@bensibley)

    7 months, 4 weeks ago

    Can you share a link to your website? I’ll need to see the same example to figure out exactly what’s happening.

    Thank you!

    Thread Starter theppesupp

    (@theppesupp)

    7 months, 4 weeks ago

    The website is not live yet, still working on it

    Thank you

    Theme Author Ben Sibley

    (@bensibley)

    7 months, 4 weeks ago

    Got it. Please give the following CSS a try and let me know if it helps. Hopefully, this works, but if not I’ll have to wait until there is a live page I can experiment with.

    @media all and (max-width: 799px) {

      .menu-primary,
      .menu-primary-items .sub-menu {
        -webkit-overflow-scrolling: touch;
      }
    }
    Thread Starter theppesupp

    (@theppesupp)

    7 months, 4 weeks ago

    That didn’t work but I got chatgpt to twitch it a bit and it works fine now. I’ll leave the css below

    Thank you Ben

    @media all and (max-width: 799px) {
    .menu-primary {
    height: 100%;
    }

    .menu-primary-items .sub-menu {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 80px; /* buffer so last item isn’t cut off */
    }
    }

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

The topic ‘Dropdown menu under Custom Link not scrollable’ is closed to new replies.