title: Toggle Slide-In Animation for Bootstrap 4 Desktop Navigation
body: <p>I'm looking to expand and collapse the desktop version of the  Bootstrap 4 navigation with a simple toggle button.</p>
  
  <p>So example would be a menu button to click and will minimise menu items into the left side of the screen.</p>
  
  <p>[Menu]</p>
  
  <p>[Menu] Link Link Link Link Link</p>
  
  <p>Bootstrap defaults however don't provide desired result.</p>
  
  <pre><code>        &lt;nav class="navbar navbar-expand-md navbar-light bg-light main-nav"&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div class="collapse navbar-collapse w-100"&gt;
                  &lt;ul class="nav navbar-nav w-100"&gt;
                      &lt;li class="nav-item active nav-breaker"&gt;
                          &lt;a class="nav-link" href="#"&gt;Menu&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#"&gt;Shop&lt;/a&gt;
                      &lt;/li&gt;  
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Haircare&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Gallery&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Offers&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item nav-breaker"&gt;
                          &lt;a class="nav-link" href="#"&gt;Blog&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Book Appointment&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;a class="navbar-brand order-first order-md-0 mx-0" href="#"&gt;Shear Success&lt;/a&gt;
  
              &lt;div class="collapse navbar-collapse w-100"&gt;
                  &lt;ul class="nav navbar-nav ml-auto"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Sign In&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/nav&gt;
  </code></pre>