Collapsible Menu Is Too Long For Mobile Landscape

I'm having an issue with a collapsible menu I created in Bootstrap 3. It works great until its viewed in landscape from a mobile device. When you expand the menu in landscape, the

Solution 1:

It is an old question, but maybe my answer can help to someone.

Bootstrap adds to .navbar-collapse.collapse the media query: @media(min-width: 768px) { overflow:visible!important } which can block scrolling menu on landscape mode. BUT! If you are using the correct viewport meta tag with “width=device-width” you shouldn’t have this issue, because then .navbar-collapse.in { overflow-y: auto } is applied by bootstrap on mobile landscape.

It happens, because media queries depend from viewport declaration. It can be pretty confusing, so right now I’m just telling, I have temporary two type of responsive header with bootstrap collapsing navbar (for some reason), one of them uses the correct viewport meta tag: “width=viewport-width, initial-scale=1”, the other uses the “uncorrect”: “initial-scale=0.5” WITHOUT “width=viewport-width”. (It is stupid, I know but I have to solve something right now, and I have to keep the desktop appearance on mobile on some pages…)

The important part is to understand that bootstrap added media queries can work correctly with correct viewport meta tag.

I hope I could help, I could tell much more, but it relates more to viewport and media queries connection. This can help for understanding: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Solution 2:

"overflow-y: auto; overflow: hidden;" - will enable the users to scroll.

For the DIV to expand 100% of the viewport, you should set "position: absolute" and height to 100%

.navbar.navbar-default.navbar-fixed-top.navbar-inner {
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    ...
}

example: http://jsfiddle.net/Lem5z/3/

Solution 3:

In Bootstrap, adding this CSS to the <ul> of the navbar

max-height: 85vh;

fixes this issue.

It creates 2 (or more) columns if the smartphone is in landscape mode and the bootstrap navbar is too tall for the screen