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?

Thanks for reminding me at that. I do understand that I should't use it in production but for now I am using it only on a student project which won't be (at least at the beginning) in production and there are still things to be done. — Tim, Mar 31 '16 at 09:32
it would be helpfull for others if you post codes (Not your whole project ofcourse) you have tried by yourself or think where the mistakes are in the code, this will also help you receiving answers and suggestions. :) — node_modules, Mar 31 '16 at 09:34

Carol Skelly · Accepted Answer · 2018-01-27T15:09:40.643

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

score 0 · Answer 2 · answered Feb 20 '21 at 12:48

I have check many solutions available on internet but non of them works perfectly. finally after lot of search i found blow example working perfectly. all it has extra is few line of Jquery and css code.

https://www.jqueryscript.net/demo/bootstrap-side-navbar/#five

Bootstrap 4 responsive navbar vertical

2 Answers2

Linked

Related