Pulldown menu on mobile do not scroll

Develop, Build & Integrate
1

Hi! our homepage : www.min-fodsel.no made using HubSpot have a problem displaying pulldown menus on mobile. The long menu do not scroll down… Try ‘Tjenester’ on your mobile. If you have a large iPhone max you can’t see is. The problem is on smaler screens when menu have to scroll.

3

Hi @Vegard,

Welcome to the Community!

I reviewed the page, and this sounds like a mobile theme/CSS issue with the longer nested navigation rather than the menu items themselves.

These resources may help:

I’d also like to tag in some folks from the community to see if they have any experience with this!

Hey @GRajput, @fyossef, @Alex_Boissonneault – Do you have any suggestions for @Vegard on this?

Thanks in advance!

Sam, Community Manager

4

Thanks for the tag, @stassey!

Hi @Vegard, and welcome to the Community!

I had a look at your site on mobile and I can reproduce what you’re seeing, the “Tjenester” submenu opens fine, but once it’s taller than the screen there’s no way to scroll to the items at the bottom. You’re spot on that it’s not the menu items themselves; it’s the mobile nav container clipping its own overflow.

The good news is this is almost always a small CSS fix rather than anything structural. What’s happening is the open menu (or submenu) panel has no defined height limit and no scroll behaviour, so anything past the fold gets cut off. Two things you can try to sort it:

  1. Give the open mobile menu container a max height tied to the viewport and let it scroll, e.g.

css

@media (max-width: 767px) {
  .header__navigation .menu, /* adjust selector to your theme */
  .header__navigation .submenu {
    max-height: calc(100vh - 80px); /* leave room for your fixed header */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
  1. Double-check that no parent element has overflow: hidden on mobile, since that will block the scroll even after you add the rule above.

The exact class names depend on your theme’s menu module, so I’d pop open your browser’s mobile inspector (or DevTools device mode), open “Tjenester”, and find the panel that’s being cut off, then apply the max-height + overflow-y: auto to that element.

A couple of references that go into the menu module and responsive theme requirements:

If you can share which theme you’re using (or a snippet of your header module), I’m happy to point you to the exact selector to target. :slightly_smiling_face:

5

Hi Alex

Thanks for helping, but this is totally greek to me. I’m not this type of technical.
We have no one to help us at the moment. So we will let it go.
I will save your e-mail.

Thanks for trying!

Greetings from Norway

Vegard