I am currently delving into Bootstrap to enhance my skills. I decided to utilize the example navbar provided in the documentation:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div>
<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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Afterward, I implemented this addition to my CSS stylesheet:
.navbar-collapse {
background-color: #fff;
}
Unfortunately, the width of the collapse menu does not fill 100% of the screen, resulting in fixed left and right sides even after making the change. While removing padding from the entire navbar is a possible course of action, it disrupts the overall layout. Is there an easier solution to address this issue or should I proceed with adjusting each element individually post-padding removal?