I have been attempting to design a unique custom navigation bar that I haven't come across anywhere else online. Despite my diligent search for examples or solutions, I have not been able to find what I am looking for. Therefore, I am reaching out here with hopes that someone can assist me in implementing this design using Bootstrap 4.
The image provided below illustrates the navigation layout that I am trying to replicate within Bootstrap. However, I am encountering challenges in its application.
This navigation consists of two rows on desktop view:
- The top row includes links aligned to the far-left and far-right.
- The bottom row features a search bar on the far-left, brand at the center, and a user avatar dropdown on the far-right.
- Upon collapsing into mobile view, only the hamburger icon should be displayed on the far-left, the brand centered, and the search icon to the far-right (which presents another issue that I will tackle later).
- Clicking the hamburger icon should first reveal the user avatar dropdown followed by the navigation items from the top navbar.
To accommodate two navbars, it seems necessary to use two collapses. While I attempted to incorporate two navbar-navs within a single navbar (as shown in my code snippet), positioning them as per my image proved challenging.
The included code snippet may not be optimal due to my limited understanding of utilizing flexbox, resulting in misalignment as visible.
https://i.sstatic.net/2nmEo.jpg 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>I am facing significant difficulties in achieving this setup but believe there must be a solution which has eluded me thus far.
Moreover, I aim to avoid duplicating list items for both desktop and mobile versions as it appears redundant.
Your assistance would be greatly appreciated. Thank you.