All geek questions in one place

Bootstrap 4 responsive navbar vertical

I am using Bootstrap 4 and have horizontal navigation on my page. On small devices, this menu is crumbling, and the menu items are still in a horizontal line. What should I do to change it to vertical so that the elements are one per line?

+5
source share
1 answer

For Bootstrap 4, breakpoints have changed. You have to redefine navigational 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 maximum width of the @media request should be adjusted accordingly for the navbar-toggleable-* class used in the navigation bar.

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

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

0
source

Source: https://habr.com/ru/post/1246134/

More articles:


All Articles