I'm having trouble with the responsive design of my Bootstrap navbar. I want all the buttons to be displayed in a row when on desktop, and then collapsed under the fas fa-bars navbar toggler as the viewport size gets smaller.
All necessary stylesheets and scripts have been properly linked.
Can anyone help me figure out what I'm doing wrong?
<body>
<!-- Header -->
<header class="header">
<div class="container">
<!-- Navbar -->
<nav class="navbar sticky-top">
<a href="" class="navbar-brand">
<img class="huisie-logo" src="./Assets/Home logo with text yellow.svg" height="50" alt="Huisie Logo" loading="lazy">
</a>
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item d-flex flex-column">
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Find room
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Make listing
</button>
<button type="button" class="btn btn-link text-dark px-3 me-auto nav-item m-2">
Sign up
</button>
<button type="button" class="btn btn-link px-3 me-auto text-warning nav-item m-2">
Log In
</button>
</div>
</div>
</nav>
<!-- Navbar -->
</div>
</header>
<!-- /Header -->