title: How can I get a vertical navbar to not take up space on smartphone when collapsed?
body: <p>When I have a horizontal navbar, it shows as collapsed on my smart phone, taking up just the vertical space for the toggle icon. However when I try to create a vertical navbar, the best I've been able to get is to have the toggle icon take up the entire column.</p>
  
  <p>I have an existing site that I'm converting to bootstrap 4.3.1 so it will work better on smartphones. You can see my experiments at <a href="http://www.lionsclub.ca/" rel="nofollow noreferrer">http://www.lionsclub.ca/</a>, where I post the latest version of the main page so I can test it from my smartphone. I just make sure that it isn't totally broken before I copy a new version.</p>
  
  <p>I want the navbar to be on the left, with the main content on the right so the navbar and main content are in a . If I don't do this, I can't get the main content to float to the right of the navbar.</p>
  
  <p>In order to get the navbar to be expanded on computer screens, I have to specify class navbar-expand-md for the nav element, which then seems to require me to specify class flex-column for the ul navbar element. When I do this, the navbar shows up properly, with the collapse toggle absent on larger screens but showing on smartphones. I can then toggle the menu if I want to see it.</p>
  
  <p>However, to get the second div (for the main content) to show up to the right, I have to specify something like col-9 as its class (if I go larger, it doesn't float on the right). Flex-column doesn't work.</p>
  
  <p>When I do this, things behave almost reasonably. However the collapsed navbar occupies the full column, taking up a lot of screen space. Is there a way to get it to collapse to a floated element in the top left corner of the enclosing ?</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="navbar navbar-expand-md navbar-light bg-light"&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 flex-column"&gt;
  &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="index.html" title="West Hill - Highland Creek Lions Club home page"&gt;&amp;nbsp;home&amp;nbsp;&lt;/a&gt;
      &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="col-9"&gt;
      some content here
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As I said, the code works but doesn't behave the way I'd like. I really want the collapsed navbar to occupy no more space than the toggle icon. The same problem exists with a horizontal navbar but is less objectionable because the horizontal content vanishes when scrolled. The vertical content always takes up space.</p>
  
  <p>Does anyone know a way to make this work better than what I've come up with?</p>