New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot scroll down a collapsed navbar on mobile devices #23374

Open
clheppell opened this Issue Aug 12, 2017 · 17 comments

Comments

Projects
None yet
@clheppell
Copy link

clheppell commented Aug 12, 2017

When visiting a site using a mobile device with a navbar with .fixed-top, if the opened navbar-collapse area runs beyond the end on the viewport vertically (due to lots of links etc), you cannot scroll down the the links at the bottom of the navbar as you can in Bootstrap 3.

When you do try to scroll, the body behind the navbar scrolls, with the navbar fixed in place.

This can be fixed by setting overflow-y: auto; and adding a max-height:Xpx to the .collapse.show class and allows you to scroll the navbar-collapse area.

This happens in (the ones I tested) major browsers (Safari, Chrome, both on the latest updates). I haven't yet tried whether this fix breaks anything elsewhere.

@tmorehouse

This comment has been minimized.

Copy link
Contributor

tmorehouse commented Aug 20, 2017

One quick fix:

.navbar-collapse {
  max-height: 280px;
  overflow-y: auto;
}

or (but not all browsers support vh units):

.navbar-collapse {
  max-height: 0.9vh;
  overflow-y: auto;
}
@jacqueslareau

This comment has been minimized.

Copy link

jacqueslareau commented Aug 23, 2017

@tmorehouse While this seems to fix the issue in mobile, it seems to create an issue with dropdowns when in full width.

image

@tmorehouse

This comment has been minimized.

Copy link
Contributor

tmorehouse commented Aug 23, 2017

Might need a few tweaks to the selector to target just when the collapse is opened:

.navbar-collapse.collapse.show {
  max-height: 280px;
  overflow-y: auto;
}
@jacqueslareau

This comment has been minimized.

Copy link

jacqueslareau commented Aug 24, 2017

Thanks it looks like it is "working". But just want to point out that when you resize the browser back to full screen while the collapsed menu is opened, it does the same thing. Looks like the show class is not being cleared. Sorry I don't have time to dig into this. :(

@tmorehouse

This comment has been minimized.

Copy link
Contributor

tmorehouse commented Aug 24, 2017

Probably placing this CSS in a media query, based on the breakpoint used in navbar, would control when this rule is applied.

@marcosnakamine

This comment has been minimized.

Copy link

marcosnakamine commented Aug 24, 2017

nav.navbar.fixed-top {
    max-height:100%;
    overflow-y:auto;
}
@clheppell

This comment has been minimized.

Copy link

clheppell commented Aug 24, 2017

A max-height: 100% approach does not work because of the height of the fixed navbar at the the top of the screen, which must be discounted

@s4uron

This comment has been minimized.

Copy link

s4uron commented Sep 15, 2017

nav.navbar.fixed-top {
    max-height: 100%;
    overflow-y: auto;
}

@media (min-width: 992px) {
    nav.navbar.fixed-top {
        overflow-y: visible;
    }
}

works for me. If you have another mobile / desktop breakpoint change the media value.

@milossumic

This comment has been minimized.

Copy link

milossumic commented Apr 13, 2018

.navbar-collapse { max-height: calc(100vh - 60px); overflow-y: auto; }

Try this

@Dygear

This comment has been minimized.

Copy link

Dygear commented Jul 6, 2018

@milossumic's comment on Apr 13th fixed the scrolling issue for me and then broke the drop down menu in the desktop version ...

@s4uron's comment on Sep 15, 2017 did fix the issues on mobile devices while not breaking anything extra on the desktop side of things.

@milossumic

This comment has been minimized.

Copy link

milossumic commented Jul 9, 2018

@Dygear You should put it in media query and use it only for smaller screens that you need. Then it won't break on desktop.

@Wruczek

This comment has been minimized.

Copy link

Wruczek commented Sep 4, 2018

Fix as of Bootstrap 4.1:

@media (max-width: 991px) {
    .navbar {
        overflow: auto;
        max-height: 85vh;
        align-items: flex-start;
    }
}
@danielmarsch

This comment has been minimized.

Copy link

danielmarsch commented Nov 20, 2018

I was desperatly searching for a fix for exactly this problem. Thank you so much!

@brass-machine

This comment has been minimized.

Copy link

brass-machine commented Nov 21, 2018

@danielmarsch This isn't 100% reliable, it can break the desktop version in certain situations.

@milossumic

This comment has been minimized.

Copy link

milossumic commented Nov 21, 2018

@danielmarsch This isn't 100% reliable, it can break the desktop version in certain situations.

Use it only on the screen sizes that you need.

@brass-machine

This comment has been minimized.

Copy link

brass-machine commented Nov 21, 2018

It would be beneficial to get this fix incorporated at some point so anyone could use BootstrapCDN without having to make custom modifications..

@adriandmitroca

This comment has been minimized.

Copy link

adriandmitroca commented Dec 5, 2018

#23374 (comment)

unset isn't too well supported by browsers, the fix should look more like this:

.navbar {
  @media (max-width: breakpoint-max(md)) {
    overflow: auto;
    max-height: 85vh;
    align-items: start;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment