My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this.
I've tried following various tutorials without success. I even attempted using *{margin:0;padding:0;} in CSS, but it didn't work either. I really want the width of the navbar list elements to expand to fit the width of the page on mobile devices.
Here's how the current situation looks in the browser:
#header-nav {
background-color: rgb(162, 162, 162);
border-radius: 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
.navbar-brand a {
text-decoration: none;
}
.navbar-brand h1 {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
color: black;
text-shadow: 1px 1px 1px white;
}
.navbar-brand a:hover,
a:focus {
text-decoration: none;
}
.nav-item a {
color: black;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
background-color: white;
}
.nav-item a:hover,
a:focus,
a:active {
color: black;
background-color: rgb(188, 188, 188);
}
.navbar-nav {
border-top: 3px solid black;
}
#chickenNav,
#beefNav {
border-bottom: 2px solid black;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c47404741524373061d031d01">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav id="header-nav" class="navbar">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a href="index.html">
<h1>Food, LLC</h1>
</a>
</div>
</div>
<button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
<div class="collapse navbar-collapse" id="collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a id="chickenNav" class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a id="beefNav" class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c524c50">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>