title: Bootstrap 4 - How to prevent collapsing menu from collapsing all elements in the nav
body: <p>I'm using a bootstrap 4 navbar and I want to prevent the logo and language switch from moving and collapsing with the menu when the hamburger menu is clicked. Here is all of my code. Also, here is the link to my codepen. Is this possible? </p>
  
  <p><a href="https://codepen.io/asizemore/pen/LYEgvOy?editors=1100" rel="nofollow noreferrer">https://codepen.io/asizemore/pen/LYEgvOy?editors=1100</a></p>
  
  <p>CSS</p>
  
  <pre><code>.logo {
    max-width: 130px;
  }
  
  .btn {
    font-family: 'Muli', sans-serif;
    font-weight: 900;
  }
  
  .btn {
    background: rgb(142, 63, 41);
    color: rgb(202, 171, 159);
  }
  
  .active {
    background: rgb(166, 73, 47);
    color: white;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  !--   NAV BAR --&gt;
  &lt;nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white"&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;a class="navbar-brand mt-lg-0" href="#"&gt;&lt;img src="https://via.placeholder.com/200x50" class="logo img-fluid"&gt;&lt;/a&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo03"&gt;
      &lt;ul class="navbar-nav mx-auto mt-2 mt-lg-0"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;PURPOSE&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;FAMILY&lt;/a&gt;
        &lt;/li&gt;
         &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;AGRICULTURE&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;ART&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;CONTACT&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
  
    &lt;/div&gt;
  
  &lt;!--   LANGUAGE SWITCH --&gt;
  
  &lt;div class="btn-group btn-toggle lang mr-1"&gt; 
    &lt;input type="button" name="lang" class="btn" value="ENG"&gt;
  
    &lt;input type="button" name="lang" class="btn active" value="SPA"&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>