导航栏中的 Bootsrap 4 汉堡菜单

Question

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

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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) 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

Answer 1

Try this, and let me know is that you're looking for.

@media only screen and (max-width: 600px) {
.navbar-brand {
    display:none !important;
}
}