Bootstrap - Change breakpoint navbar?

Question

This question was already asked here but this don't work because of the Javascript. So in the provided answer only the CSS was changed but not the JS, which means the content of the nav bar is still visible while the toggler is not. Any solution?

Edit:

My question is how to change the breakpoint of the nav bar in Bootstrap 4.xx

Solution 1

Bootstrap 5.0

Bootstrap 5 still uses the navbar-expand* classes to determine the Navbar's collapse breakpoint. There is now an additional navbar-expand-xxl class.

Bootstrap 5 - Navbar Tiers

Bootstrap 4.0.0

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes. If you exclude navbar-expand-* the mobile menu will be used at all widths. Here's a demo of all 6 navbar states: Bootstrap 4 - Navbar Tiers

Also see: Change bootstrap navbar collapse breakpoint without using LESS

Solution 2

Bootstrap provide an easy way to work with menus. You can use navbar-expand-xl, navbar-expand-lg, navbar-expand-md etc according to your needs. Thanks

Solution 3

(Bootstrap 4 Beta compliant) If you want to have customized breakpoints, you can use this snippet from my own site. I copied one of the defined breakpoints and modified it to fit my needs. I had issues with the menu not being inline with the brand, but I fixed that by overriding the flex-wrap option. To implement, simply add to another CSS file or inline. Code:

@media (max-width:1070px){.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1071px){.navbar-expand-srset{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-srset .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-srset .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-srset .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-srset .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-srset>.container,.navbar-expand-srset>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-srset .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-srset .navbar-toggler{display:none}.navbar{flex-wrap:nowrap!important;-ms-flex-wrap:nowrap!important;}}

Solution 4

I override the .navbar-expand-lg in native CSS.

Here is the example code:

    @media (min-width: *desired break point here){
.navbar-expand-lg {
    -ms-flex-flow: row nowrap !important;
    flex-flow: row nowrap !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }}

View more solutions

Comments

[Piet]

Thanks for the answer, this did the job. I had to correct the CSS for the following class: ".navbar-nav .navbar-toggleable-xs.collapse".