As per Richard, no specific question asked, easy enough though to correct. You are almost there with your supplied code, a few pointers -
1. included the necessary Bootstrap CSS and JavaScript files in your HTML head section -
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
2. To make sure that Bootstrap's navbar styles, properties and behavior is applied to the header, change -
<header class="navbar navbar-expand-lg bg-body-tertiary">
to a 'nav' element -
<nav class="navbar navbar-expand-lg bg-body-tertiary">
3. Inside the 'button' element with the class 'navbar-toggler', you can add the 'hamburger' icon or any other icon you want to show a collapsible navbar. You can also use Bootstrap's built-in icon classes -
4. To make the navbar collapse(drop down), add the 'data-bs-toggle="collapse"' attribute to the 'button' element and set 'data-bs-target="#navbarNav"'.
Your code will now look like the below. I do however suggest that you read up on the 'Getting started" link provided by Richard to actually understand what teh code do and why -
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand display-5" href="#">BrandName</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">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-md-5 ">
<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="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="btn ms-auto">
<a href="#" class="btn btn-secondary ms-lg">Login</a>
<a href="#" class="btn btn-primary ms-lg">JOIN US</a>
</div>
</div>
</div>
</nav>