Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows
I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it.
.navbar-brand{
padding-top: 0;
}
@media(min-width:768px)
{
.navbar-first-row{
height:50px;
background-color:B5428E;
}
.navbar-top-left{
position:absolute;
top:0px;
left:0px;
background-color:42B55B;
}
.navbar-top-right{
position:absolute;
top:0px;
right:15px;
background-color:E82985;
}
.navbar-bottom-left{
background-color:A5B60C;
}
}
<nav class="navbar navbar-default">
<div class="navbar-first-row"></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/128x50"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-top-left">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-bottom-left">
<li><a href="#">1-800-233-1111</a></li>
<li><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c707971735c75
7727332727968">[email protected]</a></a></li>
</ul>
<ul class="nav navbar-nav navbar-bottom-right">
<li><a href="#">Location</a></li>
<li><a href="#"> Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-top-right">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#" class="bg-success">Call now </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
This is the original code snippet:
https://codepen.io/metismiao/pen/bQBoyw
I'm looking for assistance in converting it to Bootstrap 5