Fixed Menu Not Scrollable

[mda]

I have a responsive menu that is sticky when reaching the top of the page in larger windows, but fixed to the top permanently when displaying the hamburger. The menu is using Todd Motto’s flaunt.js menu: https://toddmotto.com/labs/flaunt-js/

In the original demo (above) the menu is not fixed. Changing the CSS to make the menu fixed has the unfortunate effect of preventing menu scrolling.

I would like to prevent the body scrolling behind, which I can do successfully with jQuery toggleClass, but need to make the menu scrollable as it will often be extending off-screen in hamburger mode on smaller devices.

I have tried adding overflow-y: scroll to various parts of the menu structure; this creates the scroll track, but still there is no bar inside and no scrolling even when the menu extends off-screen.

The problem occurs when changing the nav’s position in the CSS class .nav from position: relative in the default style, to position: fixed with the media query (max-width: 768px).

Is there a way of enabling the menu to scroll, ideally with the main browser’s scrollbar (with the body not scrolling behind)?

jsfiddle position: relative – https://jsfiddle.net/m_d_a/6gtjpvck/

jsfiddle position: fixed – https://jsfiddle.net/m_d_a/6gtjpvck/1/

[Shikkediel]

You could give something like this a try, a fixed height is needed to create any overflow that will have a functioning scrollbar:

.nav {
  max-height: calc(100% - 50px);
  overflow-y: auto;
}

[mda]

Thank you. I am now getting scrollbars for the nav. I can adjust the layout now to compensate for the jumping when scrollbars appear or not.

Is it possible to get the nav to use the window’s scrollbar rather than create its own?

Would I need the menu to be more of an overlay to achieve this?

[mda]

Actually in responsive mode (firefox) this works as the scroll bars are the same width for the window and items within the page. If this is true for most mobiles, then the only time the page layout changes is if the window on a desktop / laptop is resized to be small… which doesn’t matter too much I think.

[Shikkediel]

If you’re using fixed position, the element is placed relative to the browser window itself which has no overflow that’ll create a scrollbar. I don’t think there’s a way to make the overflow “transfer” to the document. But like you mentioned, scrollbars are a lot less intrusive on mobile phones.

[Author]

Posts