I'm seeking advice on how to enhance my portfolio with a simple addition. Specifically, I want to modify my NavBar in bootstrap to display in three columns, similar to the visual concept illustrated below.
https://i.sstatic.net/4XHRJ.png
Currently, I have the basic bootstrap NavBar implementation using default code:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
<div class="container">
<a class="nav-link" href="#">my name goes here</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">about</a></li>
<li class="nav-item"><a class="nav-link" href="#">resume</a></li>
</ul>
</div>
</div>
</nav>
I've managed to tweak the styling to achieve a somewhat acceptable layout through padding adjustments, but I seek a more elegant solution. My main challenge lies in understanding and implementing the responsive design, especially merging the links into dropdown navigation on mobile while maintaining consistency. Additionally, I aim to place 'my name goes here' as the header above the navigation on smaller screens.
Any guidance or tips would be greatly appreciated. Thank you.
UPDATE
<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
</li>
</ul>
</div>
<a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Colin Grant</a>
<div class="navbar-collapse collapse dual-nav w-50 order-2">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">about</a></li>
<li class="nav-item"><a class="nav-link" href="">resume</a></li>
</ul>
</div>
</div>
This revised structure seems to function appropriately. Any further suggestions for optimization?
Appreciate your input.