I am seeking to create a unique custom navbar layout with specific requirements:
- A centered logo
- 3 collapsible menu buttons on the left
- 2 icons (account and Instagram) on the right, always visible
When the left menu is collapsed, I want to display a hamburger icon on the left, the logo in the center, and the two icons horizontally aligned on the right. I have reviewed various navbar examples but have not found a similar design.
Below is my attempt at implementing this layout. It is mostly functional, however, the right menu items become vertical when the left menu collapses rather than remaining horizontal.
.navbar-brand.abs {
position: absolute;
width: auto;
left: 50%;
transform: translateX(-50%);
text-align: center;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d31">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Navbar example">
<div class="container-fluid">
<a class="navbar-brand abs" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Shop</a>
</li>
</ul>
</div>
<div>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Y</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb0adb1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>