Scrolling Issue on Fixed Nav

HTML & CSS
1

I have a Bootstrap 4 nav bar with a mega menu that is fixed to the top when not collapsed. But because it’s fixed, there is an issue when the mega menu is open on shorter screens and you can not scroll to the bottom of the expanded mega menu.

How can I keep a fixed nav section, but when the mega menu is open allow that part to scroll if needed.

Here is a codepen
https://codepen.io/aaron4osu/pen/NWjvQqw

Thanks in advance for any help

2

Hi,

I can’t access your codepen as it won’t load as my mobile signal is weak but generally with a fixed positioned top menu you would set a max height of 100vh on it and set overflow to auto.

That will enable the fixed position element to scroll within itself.

It may not be as straight forward as that depending on how it’s built but the concept will be the same.

3

Thanks Paul…
actually I think that codepen link I added might have been bad. Here is an updated link.

I adding max-height: 100vh; and overflow:auto; to the megamenu class and it almost fixed the issue. It’s scrolling a little bit, but not to the bottom of the menu. it’s also not working as the screen height increases a bit.

I tried adding a bunch of padding to the bottom of the mega menu to test if that was the issue and it’s still not scrolling all the way to the bottom when the menu is not collapsed (mobile).

Any ideas?

4

Hi,

That menu is quite awkward as the dropdown comes out of the fixed menu and makes it hard to control.

This is a bit magic numberish but may help.

@media screen and (min-width: 992px) {
  .megamenu {
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
}

I didn’t see the mobile issue as it seems you are setting the fixed-top to static for mobile and therefore it should scroll ok. I tested the changes above and it seems to scroll ok on my iphone.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.