title: How to use topnav with left navigation bar
body: <p>I've been trying to follow the the guide below:
  <a href="https://bootstrapious.com/p/bootstrap-sidebar" rel="nofollow noreferrer">https://bootstrapious.com/p/bootstrap-sidebar</a></p>
  
  <p>I want my layout to be the following:
  <a href="https://i.stack.imgur.com/RqB4k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RqB4k.png" alt="Desired layout"></a></p>
  
  <p>where the black bar is a navigation that hides away using negative margins, the top bar grows in width when the left bar is hidden. The white space is for my content which goes into a container for bootstrap grid.</p>
  
  <p>However current my layout like this:</p>
  
  <p><a href="https://i.stack.imgur.com/B6ko1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B6ko1.png" alt="Current layout"></a></p>
  
  <p>The blue bar flex's to the right but doesn't go to the top of the page</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;/head&gt;  
      &lt;div class="wrapper"&gt;
      &lt;header class="skin-josh"&gt;    
              &lt;nav id="sidebar"&gt;
                  &lt;div class="page-sidebar sidebar-nav"&gt;
                      &lt;li class="active"&gt;
                          @if(isset($id))
                              @include('layouts._leftmenu')
                          @else
                              @include('layouts._leftmenu_noproject')
                          @endif
                      &lt;/li&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
      &lt;/header&gt;
  
  
  
      &lt;nav class="navbar fixed-top navbar-light bg-light" role="navigation"&gt;
          @if (session()-&gt;get('projectname'))
              &lt;h3 style="float:left;color:white;padding-left:25px;"&gt;{{ session()-&gt;get('projectname') }}&lt;/h3&gt;
          @endif  
          &lt;div class="burgernav" style="float:left;height:65px;padding-left: 5px;"&gt;
              &lt;button class="btn btn-secondary" type="button" id="sidebarCollapse" style="background-color:rgb(0, 131, 185);color:white;height:65px;"&gt;
              &lt;i class="fas fa-bars fa-lg"&gt;&lt;/i&gt;                
              &lt;/button&gt;              
          &lt;/div&gt;
      &lt;/nav&gt;
  
  
  
  
      &lt;body id="content"&gt;  
          @yield('content')
      &lt;/body&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>wrapper {
      display: flex;
      align-items: stretch;
  }
  
  #sidebar {
      min-width: 150px;
      max-width: 150px;
      min-height: 100vh;
  
  
      vertical-align : top;
  }
  
  #sidebar.active {
      margin-left: -150px;
  }
  
  .sidebar {
      min-height: 92.58vh;/*100vh;*/
      display: block;
      width: 150px;
  }
  .left-side{
   width:150px;
      min-height:100vh;
  }
  
  .navbar {
  
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }
  </code></pre>