Bootstrap 4 responsive navbar vertical

Question

I am using Bootstrap 4 and have navigation with horizontal items on my page. On small devices this menu collapses and menu items are still in horizontal line. What should I do to change it to vertical so items are one per each line?

Solution

For Bootstrap 4, the breakpoints have changed. You should override the navbar CSS like this if you want it to be vertical on small screens:

@media(max-width: 544px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}

Demo http://codeply.com/go/Ar1H2G4JVH

Note: The @media query max-width should be adjusted accordingly for the navbar-toggleable-* class used in the navbar.

• navbar-toggleable-xs - 544px
• navbar-toggleable-sm - 767px
• navbar-toggleable-md - 991px

UPDATE: The extra CSS is no longer needed as of Bootstrap 4 Alpha 6 since the navbar will stack vertically: http://www.codeply.com/go/cCZz5CsMcD