Welcome to my HTML code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img class="logo" src="/images/logo.png" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Check out my CSS styling below:
/* Styling for Navbar */
.navbar {
width: 100%;
/* height: 45px; */
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.logo {
height: 30px;
}
I'm looking to align the logo on the far left and group the nav-items together on the far right. I tried using justify-content in the container but it didn't work. Any suggestions on how to achieve this layout?