I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-friendly. However, I can't seem to figure out how to replicate that layout.
I've attempted to center the bars using the following code snippets:
<nav class="navbar navbar-expand-lg bg-dark border-bottom" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<i class="fas fa-bars" style="color: #fff"></i>
</button>
<div class="collapse navbar-collapse w-100" id="collapsibleNavbar">
<a class="navbar-brand" href="<?= $url ?>">
<img src="<?= $url ?>images/img-logo.png" alt="<?= $url ?>" class="d-block d-sm-inline-block mw-100 mx-auto">
</a>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-dark border-bottom" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<i class="fas fa-bars" style="color: #fff"></i>
</button>
<div class="collapse navbar-collapse w-100" id="collapsibleNavbar">
<div class="d-flex justify-content-center w-100">
<div class="d-flex align-items-center">
<a class="navbar-brand me-3" href="https://www.digitalproductscorner.com/">
<img src="https://www.digitalproductscorner.com/images/img-logo.png" alt="https://www.digitalproductscorner.com/" class="mw-100" style="width: 100px; height: auto;">
</a>
<ul class="nav nav-pills nav-fill flex-column flex-sm-row mb-3" style="display: flex; gap: 10px;">
<li class="nav-item"><a href="https://www.digitalproductscorner.com/" class="nav-link ">Home</a></li>
<li class="nav-item"><a href="https://www.digitalproductscorner.com/about.php" class="nav-link ">About</a></li>
<li class="nav-item"><a href="https://www.digitalproductscorner.com/contact.php" class="nav-link ">Contact</a></li>
</ul>
</div>
<ul class="nav navbar-nav ms-auto">
<li>
<form action="index.php" method="get" class="d-flex mb-3">
<input type="text" name="q" class="form-control" placeholder="e.g. health or golf etc" required>
<button type="submit" class="btn btn-success ms-2"><i class="fas fa-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
</div>
</nav>
The only element that appears correctly is the top search box. My CSS is relatively simple at this point:
.nav-fill .nav-item {
font-weight: 500;
}
.nav-pills .nav-link {
background-color: #fff;
border: 1px solid #ccc;
color: #333;
font-weight: bold;
margin-right: 10px !important;
padding: 0.5rem 1rem;
text-transform: uppercase;
}
.navbar-brand {
display: flex;
margin-bottom: 15px;
}
.nav.navbar-nav.ms-auto {
display: flex;
margin: auto;
}
footer {
background-color: black;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
Even copying the code line by line from this site: doesn't seem to solve the alignment issue on my site.