title: Bootsrap 4 hamburger menu in navbar
body: <p>I am working on a website and I choose to use Bootstrap 4. I am trying to achieve a navbar design that always displays hamburger menu on the left and some navbar items on the right. When the screen gets smaller and reaches certain breakpoint, I would like the items on the right to transfer to the hamburger menu on the left so that when it is viewed from tablet screen or smaller, the navbar has only hamburger menu on the left. Here is the example navbar that Bootsrap 4 provided </p>
  
  <pre><code>    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&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;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
        &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I think I could work it out my mentioned design by tweaking this code above little bit. But I'm simply don't know how can I do this. Anybody who can suggest me links, articles that does the same thing I'm trying to express, or you could just simply provide me some code sample. Thank you.I will leave a reference image so that you may understand what I am trying to say. (Click on the link to see the image) <a href="https://i.stack.imgur.com/pM4gM.jpg" rel="nofollow noreferrer">So the hamburger menu will be on right and when it is collapsed, the hamburger menu now will simply contains the rest of navbar links</a></p>