Bootstrap navbar hide menu elements when resizing

Question

I have standard bootstrap menu with many elements and I would like to move those menu elements into stack (where 3 line button are ) button when I change screen size.

  <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <a class="navbar-brand" href="#">Top navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Does anyone know how to to that?

With current code, the hamburger toggler is only displayed with screen width less than the `md` breakpoint, and then all the menu items in `navbar-collapse` display in the "mobile" collapsed menu. Are you asking how to display the toggler at all screens widths? — Carol Skelly, Feb 14 '19 at 15:24
@Ari no this completely different thing. I need to move menu elements on resize — Klapsius, Feb 14 '19 at 15:24
@Zim Ok I will try to explain. Suppose we have 30 menu elements and screen size is `X` px. All elements fit into screen and then I slowly changing screen width and menu elements disappears. 26 visible and 4 inside button. changing again 25 visible ant 5 inside and so on — Klapsius, Feb 14 '19 at 15:29

Carol Skelly · Accepted Answer · 2021-07-30T13:24:28.727

The responsive Bootstrap Navbar has only two "states"...

Collapsed (vertical)
Non-collapsed (horizontal)

The navbar-expand-* class is used to change the breakpoint between the two states.

In your case, you want to maintain the "non-collapsed" horizontal Navbar state, but gradually move nav items to a collapsed menu as needed. Bootstrap 4 doesn't provide an "out-of-the-box" solution for this.

However, using the Bootstrap dropdown menu, and some jQuery logic you can progressively move the overflowing navbar items to the dropdown. Here's the jQuery logic I wrote for this:

var autocollapse = function (menu,maxHeight) {
    
    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        $(".navbar-nav").removeClass('w-auto').addClass("w-100");
        while (navHeight > maxHeight) {
            //  add child to dropdown
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
        $(".navbar-nav").addClass("w-auto").removeClass('w-100');
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');
      
        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }
      
        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            //  remove child from dropdown
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
}

Demo: https://codeply.com/go/IETSah3bFG

This works by checking the height of the Navbar as the screen is resized (or page loaded). When the height has increased, the nav items have wrapped and then items are moved to the dropdown. When there are no wrapping nav items, the items are removed from the dropdown.

Also see: "Mashable" style navbar

Terrific solution! Is there a reason you use `$(".navbar-nav")` instead of simply `nav`? — webtweakers, Dec 03 '20 at 13:09

Bootstrap navbar hide menu elements when resizing

1 Answers1

Linked