Issue
I currently have a very minimal navbar set up with Bootstrap 5. With navigation bars, there is both the 'navbar-brand' and nav links.
I want my brand/logo to be all the way on the far left, while all the navbar-nav links to be all the way to the right.
This could be achieved with flexbox and justify-content-between
However I have 0 clue where the navbar flex properties come into play, so therefore I am not sure where or what to change to achieve this effect
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/brand.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
Solution
Is this what you want ? Indeed, justify-content-between is very useful for that. You have to use this style for the parent div and to put the children elements you want inside it.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<nav
class="navbar d-flex justify-content-between fixed-top navbar-expand-lg navbar-light bg-light p-2"
>
<a class="navbar-brand align-self-center" href="#"><img src="images/brand.png" /></a>
<button
class="navbar-toggler align-self-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav text-end pe-1">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</nav>
</body>
</html>Answered By - Asmoth Answer Checked By - Marilyn (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.