creating a Bootstrap 4 two row navbar custom design

Question

I am trying to create a custom navigation, that I have found to not have been duplicated anywhere else on the internet. I have searched high and low for some sample solution, but to no avail, so was hoping someone could help me in achieving this in Bootstrap 4 here.

The image attached below, displays how I am trying to recreate in Bootstrap, however its proving more difficult to apply.

It a two row navbar in desktop.

• top nav has links to the far-left and to the far-right
• bottom nav has a search to the far-left, brand in the center, and the user avatar dropdown to the far-right.
• when the navbar collapses in mobile, it should only display the hamburger icon in the far-left, the brand in the center, and the search icon to the far-right, which will collapse the search (a second issue for me to work out myself later on).
• when the hamburger is clicked, it should show the avatar dropdown first, then list the following nav items from the top navbar.

The thing is, is that to have two navbars you have to have two collapses. I have tried using one navbar with two navbar-navs inside it (which my snippet shows), but positioning them accordingly to my image does not work.

The attached snippet of my code is not that great, since I am not properly understanding how to utilize flexbox into it, but nothing is sitting correctly as you see.

A link to my codepen: https://codepen.io/krystyna93/pen/PLyMPr?editors=1100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="navbar navbar-light bg-light navbar-expand-md">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo/Brand</a>

  <div id="navbar" class="navbar-collapse collapse flex-column w-100">
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>
  </div>
  <!--/.nav-collapse -->
</div>

There must be a way of doing this, but I am struggling with it quite a bit and keep hitting a brick wall every time I get close.

I am also trying not to double up on list items for desktop and for mobile, because that is too redundant.

Any help will be much appreciated. Thanks

Answer 1

I guess you can figure out the rest from here. Basically, your first row of links, collapse buttons, logo, search box, user dropdown should all be directly under navbar. The navbar should be row and wrapped. From then on, it's mostly just rearranging the order.

<div class="navbar navbar-light bg-light navbar-expand-md flex-row flex-wrap">
    <a class="navbar-brand flex-grow-1 justify-content-center order-sm-2 order-3 order-md-3" href="#" >Logo/Brand</a>
    <button class="navbar-toggler order-1 order-xs-1 order-md-4" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <button class="navbar-toggler order-3 order-xs-3 order-md-5" type="button" data-toggle="collapse" data-target="#search" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div id="navbar" class="navbar-collapse collapse flex-row w-100 order-5 order-sm-5 order-md-1">
    <ul class="navbar-nav justify-content-start flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav justify-content-end flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>

  </div><!--/.nav-collapse -->
  <div id="search" class="navbar-collapse collapse flex-row order-sm-4 order-4 order-md-2 ">
      <input type="text" />
      <button >Search</button>
    </div>




</div>

https://codepen.io/anon/pen/movbMy?editors=1000