title: Putting menu options in "more" button when there is not enough space
body: <p>I am just starting with web developing so sorry if my questions are trivial.</p>
  <p>I am using Bootstrap 4 and created <code>navbar</code> with hamburger menu which hides entire menu when screen reaches certain width but I would like to change that the single menu elements hides in &quot;more&quot; button one by one so that if only one menu option is too much for the menu to fit, only that option goes to &quot;more&quot; button.</p>
  <p>First I tried in Javascript to tide screen width to make disappear last element :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval(okno, 25)
  
  function okno() {
      var a = window.innerWidth;
      if (a &lt; 1335) {
          document.getElementById("kontakt").style.display = "none";
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-expand-xl navbar-light"
      style="background-color:dimgrey;position:fixed;width:100%;z-index:100"&gt;
      &lt;button class="navbar-toggler" type="button" style="background:white;float:left !important" data-toggle="collapse"
          data-target="#colapsibleNavbar"&gt;
          &lt;span class="navbar-toggler-icon" style="color:black !important"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse justify-content-center" id="colapsibleNavbar"&gt;
          &lt;ul class="navbar-nav"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="kopysno.html"&gt;Strona Główna&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="Aktualnosci.html"&gt;Aktualności&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="mapaokolicy.html"&gt;Mapa Okolicy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown"
                          href="#"&gt;Informacje&lt;/a&gt;
                      &lt;div style="background-color:dimgrey" class="dropdown-menu"&gt;
                          &lt;a class="dropdown-item" href="Historia.html"&gt;Historia&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Geografia&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Środowisko&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Kartografia Archiwalna&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Galeria Fotografii&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Filmy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="dawnimieszkancy.html"&gt;Dawni Mieszkańcy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Artykuły prasowe&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="kontakt nav-item"&gt;
                  &lt;a class="nav-link" href="kontakt.html"&gt;Kontakt&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But it simply doesn't work and i don't know why. Can you help me? Thank you in advance.</p>