I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be greatly appreciated.
https://i.sstatic.net/r4TIk.jpg
Code:
.navbar-brand {
position: absolute;
width: 100%;
z-index: 3000;
}
.mnav {
height: 123px;
z-index: 2000;
width: 1200px
}
.has-bg-img {
z-index: 2000;
}
<div class="section fixed-top">
<div class="container-fluid bg-dark">
<div class="row p-3 bg-dark mx-auto ">
<div class="container text-light" style="max-width: 1200px">topnav</div>
</div>
</div>
<div class="container-fluid bg-light d-flex shadow-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light mx-auto mnav">
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link text-dark" href="//codeply.com">Clinic</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="col-auto mx-auto">
<div class="shadow rounded-circle">
<img src="https://i.imgur.com/swpgs2N.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
<div class="mx-5 order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="row pt-4 d-flex align-items-center">
<div class="col-3 text-white ">
<span class="navbar-toggler-icon"></span>
<h5>Appointment</h5>
<h5>Now !</h5>
<img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
</nav>
</div>
</div>
<script src="js/jquery-3.x-git.slim"></script>
<script src="js/bootstrap.min.js"></script>