title: Bootstrap 4 flexible responsive navbar menu
body: <p><strong>NOTE that I'm not asking how to align items in navbr menu (left or right), but how to dynamically move items from navbar to dropdown.</strong></p>
  
  <p>I'm using Bootstrap 4.1 in my project. My top main menu contains many links. The last item is a dropdown which contains additional links:
  <a href="https://i.stack.imgur.com/fCxUO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fCxUO.png" alt="Bootstrap navbar"></a></p>
  
  <p>I want, when resizing the window, the right items for which doesn't have enough space in the header, to be moved into the dropdown item.</p>
  
  <p>What I want:
  <a href="https://i.stack.imgur.com/bNwkB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bNwkB.png" alt="Bootstrap wanted functionality"></a></p>
  
  <p>But when resizing, the items are shrinking. Then, for "md" (and smaller) breakpoints, the default navbar functionality is activated:
  <a href="https://i.stack.imgur.com/OaEew.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OaEew.png" alt="Bootstrap default functionality"></a>
  <a href="https://i.stack.imgur.com/XHrCq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XHrCq.png" alt="Bootstrap mobile navbar"></a></p>
  
  <p>Solutions with flexbox are acceptable, too.
  Link to simple demo with default Bootstrap navbar: <a href="https://codepen.io/anon/pen/ePpVZe" rel="nofollow noreferrer">CodePen</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Menu item 4&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Menu item 5&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Menu item 6&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Menu item 7&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Menu item 8&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown Menu
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Menu item 9&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Menu item 10&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;About&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Help&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt; 
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Thank you!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the window's resize function on which I'm currently working:</p>
  
  <pre><code>let addMenu = $("#navbarNavDropdown &gt; ul &gt;li.dropdown"),
      addMenuList = addMenu.children("ul"),
      menuItems = $("#navbarNavDropdown &gt; ul &gt; li:visible:not('.dropdown')");
  
  function _resize() {
      var itemsWidth = 0,
          startWrap = false,
          navWidth = $("#navbarNavDropdown").width() - addMenu.width();
      menuItems.each(function () {
          if (startWrap == false) {
              if (itemsWidth + $(this).width() &lt; navWidth) {
                  itemsWidth += $(this).width();
              }
              else {
                  startWrap = true;
                  addMenuList.prepend(this);
              }
          }
          else {
              addMenuList.prepend(this);
          }
      });
  }
  window.onresize = _resize;
  </code></pre>
  
  <p><em>Link above has been updated, too.</em></p>
  
  <p>It works when making the screen smaller, but I need to implement:</p>
  
  <ul>
  <li>when increasing the screen's width;</li>
  <li>in "md" (or smaller) breakpoint, to use the default bootstrap's functionality</li>
  </ul>