title: Bootstrap header adjustments on collapsible navbar
body: <p>JS Fiddle Link</p>
  
  <p><a href="https://jsfiddle.net/9dumrg8v/1/" rel="nofollow noreferrer">https://jsfiddle.net/9dumrg8v/1/</a></p>
  
  <p>Here is the look of my current header
  <a href="https://i.stack.imgur.com/Pson5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pson5.png" alt="header"></a></p>
  
  <p>I have a few goals that I want working:</p>
  
  <p><strong>1. Keep the collapsible bar and image on the same line</strong></p>
  
  <p>I would like to have it "locked" on a line when it gets adjusted to a smaller window:</p>
  
  <p><a href="https://i.stack.imgur.com/fB98F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fB98F.png" alt="img"></a></p>
  
  <p>The image and collapsible bar is separated since I don't include the image in the dropdown</p>
  
  <pre><code>  &lt;a class="navbar-brand" href="main"&gt;
      &lt;img src="img/logo_header.png" class="img-responsive img-header" width="200"&gt;
    &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;/div&gt;
  </code></pre>
  
  <p><strong>2. Include the links in the bottom in the collapsible navbar</strong></p>
  
  <p>Have the list (one-six) be with the navbar when it appears, currently they are separated.</p>
  
  <p><a href="https://i.stack.imgur.com/9Im6s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Im6s.png" alt="excluded nav"></a></p>
  
  <p>Also, If I try to add it inside the <code>&lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;</code>, it gets included in the same row and destroys the design.</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
   &lt;div class="mwc-orange-nav"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row px-4"&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              One&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              Two&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              Three&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              Four&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              Five&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col text-center dropdown menu-holder menu-box pb-2 pt-2"&gt;
            &lt;a href="" class="menu-header"&gt;
              Six&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kvPjv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kvPjv.png" alt="collapsible navbar error"></a></p>
  
  <p>Any help would be appreciated, thank you.</p>