After building a landing page with a bootstrap navbar, I noticed that the hamburger menu doesn't display the list of items when the screen size is decreased. Here is the code I used:
<nav class="navbar navbar-expand-lg" id="navbar">
<div class="container-fluid" id="header">
<div class="d-flex align-items-center ml-4">
<a href="#">
<img src="../assets/img/dreamers logo.png" width="80px;" class="mr-2">
</a>
<a class="navbar-brand" href="#">Project Booking App</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="sideheader" style="padding-right: 40px;">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ml-4">
<li class="nav-item ms-2">
<a class="nav-link" id="home1" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link" id="home1" href="#feature">Features</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link" id="about1" href="#about">About</a>
</li>
</ul>
<button class="btn btn-custom-btn ms-2" @click="openLoginModal" style="color: black;">Login</button>
<button class="btn btn-custom-btn ms-4" @click="openRegisterModal" style="color: black;">Register</button>
</div>
</nav>