Is there a way to use the bootstrap navbar brand without it affecting the layout of other elements?
I'd like to have the icon aligned to the left and the navbar elements perfectly centered.
Alternatively, is there a way to include the element as a normal link but position it on one side?
// CSS styles
body {
background-color: black;
font-family: 'Righteous', cursive;
}
/* Other CSS styles... */
// HTML structure
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Righteurs -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark background-black">
<div class="container-fluid">
<a class="navbar-brand active d-inline-block" href="#">
<!-- SVG or Icon Code here -->
<span class="mb-0 font-righteus">Accedi</span>
</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 justify-content-center font-righteus" id="navbarNavAltMarkup">
<div class="navbar-nav">
<!-- Navbar links -->
<a class="nav-link p-md-3 m-md-3 border-pill home-bd-colors-active h4" aria-current="page" href="#"><span class="home-colors-active">Home</span></a>
<a class="nav-link p-md-3 m-md-3 border-pill storia-bd-colors h4" href="pages/storia.html"><span class="storia-colors">Storia</span></a>
<!-- Other Navbar links -->
</div>
</div>
</div>
</nav>
<!-- Bootstrap JavaScript Files -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>