title: Building a custom Navigation Bar that will move items to drop down, before the full navigation changes to full drop down
body: <p>I just want to use the Bootstrap part for design and look, but I also want to use the <code>JavaScript</code> found <a href="https://codepen.io/john-h-williams/pen/PrZyMX" rel="nofollow noreferrer">here</a> to give it a custom drop down menu that builds itself when nav menu expands past the screen.</p>
  
  <p>Some of the <code>CSS</code> code is required to work with the <code>JavaScript</code> code.</p>
  
  <p>I have removed lots of <code>CSS</code> code, but then the <code>JavaScript</code> does not work correctly.</p>
  
  <p><b>HTML CODE</b></p>
  
  <p>REMOVED!</p>
  
  <p><b>CSS Code</b></p>
  
  <p>REMOVED!</p>
  
  <p><b>JavaScript</b></p>
  
  <p>REMOVED!</p>
  
  <p>To the right of Dropdown is a gray bar, I would like that to be the same color as the nav bar.</p>
  
  <hr>
  
  <p>Figured out the <code>CSS</code> code, its down to 1 section, but now the bootstrap is not working correctly. Everything with in <code>&lt;ul class="navbar-nav mr-auto links"&gt;</code> is moving to <code>&lt;li class="nav-item dropdown hidden"&gt;</code>, but its suppose to be 1 item at a time, when it reaches max size of screen.</p>
  
  <p><b>HTML Code</b></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-dark info-color"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mr-auto links"&gt;
              &lt;li class="nav-item active"&gt;
                 &lt;a class="nav-link waves-effect waves-light" 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 waves-effect waves-light" href="#"&gt;Features&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Features&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Features&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Features&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link waves-effect waves-light" href="#"&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Dropdown&lt;/a&gt;
                  &lt;div class="dropdown-menu dropdown-info" aria-labelledby="navbarDropdownMenuLink"&gt;
                      &lt;a class="dropdown-item waves-effect waves-light" href="#"&gt;Action&lt;/a&gt;
                      &lt;a class="dropdown-item waves-effect waves-light" href="#"&gt;Another action&lt;/a&gt;
                      &lt;a class="dropdown-item waves-effect waves-light" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt; 
          &lt;/ul&gt; 
          &lt;li class="nav-item dropdown hidden"&gt;
            &lt;a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuHidden" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Menu&lt;/a&gt;
            &lt;div class="dropdown-menu dropdown-info hidden-links" aria-labelledby="navbarDropdownMenuHidden"&gt;
            &lt;/div&gt;
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><b>CSS Code</b></p>
  
  <pre><code>li.nav-item.hidden {
    display: none;
  }
  </code></pre>
  
  <p><b>JavaScript Code</b></p>
  
  <pre><code>$(function() {
  
    var $nav = $('nav.navbar');
    var $btn = $('nav.navbar a#navbarDropdownMenuHidden');
    var $btn_show = $('nav.navbar li.nav-item.hidden');
    var $vlinks = $('nav.navbar .links');
    var $hlinks = $('nav.navbar .hidden-links');
  
    var numOfItems = 0;
    var totalSpace = 0;
    var breakWidths = [];
  
    // Get initial state
    $vlinks.children().outerWidth(function(i, w) {
      totalSpace += w;
      numOfItems += 1;
      breakWidths.push(totalSpace);
    });
  
    var availableSpace, numOfVisibleItems, requiredSpace;
  
    function check() {
  
      // Get instant state
      availableSpace = $vlinks.width() - 10;
      numOfVisibleItems = $vlinks.children().length;
      requiredSpace = breakWidths[numOfVisibleItems - 1];
  
      // There is not enought space
      if (requiredSpace &gt; availableSpace) {
        $vlinks.children().last().prependTo($hlinks);
        numOfVisibleItems -= 1;
        check();
        // There is more than enough space
      } else if (availableSpace &gt; breakWidths[numOfVisibleItems]) {
        $hlinks.children().first().appendTo($vlinks);
        numOfVisibleItems += 1;
      }
      // Update the button accordingly
      $btn.attr("count", numOfItems - numOfVisibleItems);
      if (numOfVisibleItems === numOfItems) {
        $btn_show.addClass('hidden');
      } else $btn_show.removeClass('hidden');
    }
  
    // Window listeners
    $(window).resize(function() {
      check();
    });
  
    $btn.on('click', function() {
      $hlinks.toggleClass('hidden');
    });
  
    check();
  
  });
  </code></pre>