Boostrap 4.5.2 Navbar Dropdown appearing in Wrong Location - html

Question

I have created a navbar using Boostrap 4.5.2. In my navbar, I want to have a dropdown that goes with the tab "browse". My browse tab has three options associated with it. When I click on the "browse" tab; my dropdown menu appears with the correct content but it appears at the very start of the navbar. Any help on fixing this issue would be greatly appreciated. Below I have attached my navbar code and a gif of what happens.
<div class="row d-flex align-items-center" id="top-bar">
<!--Website title-->
<div class="col-auto"><h1>My Website</h1></div>
<!--nav bar-->
<div class="col-auto">
<nav class="navbar navbar-expand-lg" id="nav">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./advanced_search.html">Advanced Search</a>
</li>
<li class="nav-item nav-dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./Part01_PostList.php"
>Posts</a
>
<a class="dropdown-item" href="./Part02_SinglePost.php?post_id=1"
>Images</a
>
<a class="dropdown-item" href="./Part03_SingleImage.php?image_id=1"
>Users</a
>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!--Utility dropdown-->
<div class="nav-dropdown mx-auto" id="utility-nav">
<i class="fa fa-cog btn btn-secondary" type="button" id="utility-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./favorites-list.php">Favorites List</a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Register</a>
<a class="dropdown-item" href="#">Login</a>
</div>
</div>
<!--Search bar-->
<div class="col-auto ml-auto">
<form action="./Part04_Search.php" method="POST" class="form-inline my-2 my-lg-0" id="search-bar">
<input
class="form-control mr-sm-2"
type="text"
name="title-alt"
placeholder="Search"
aria-label="Search"
/>
<button class="btn-primary" id="search-btn" type="submit">
Search
</button>
</form>
</div>
</div>
https://i.gyazo.com/49fd1ebe460510762a683ab9aff1349f.mp4

Answer 1

Your menu is over towards the left because in the list item, you’re using the class nav-dropdown, but that’s not a Bootstrap class. If you change it to dropdown (or dropleft or dropright), then the dropdown menu will be under the Browse button.
Was:
<li class="nav-item nav-dropdown">
Change to:
<li class="nav-item dropdown">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="row d-flex align-items-center" id="top-bar">
<!--Website title-->
<div class="col-auto">
<h1>My Website</h1>
</div>
<!--nav bar-->
<div class="col-auto">
<nav class="navbar navbar-expand-lg" id="nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./advanced_search.html">Advanced Search</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./Part01_PostList.php">Posts</a>
<a class="dropdown-item" href="./Part02_SinglePost.php?post_id=1">Images</a>
<a class="dropdown-item" href="./Part03_SingleImage.php?image_id=1">Users</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!--Utility dropdown-->
<div class="nav-dropdown mx-auto" id="utility-nav">
<i class="fa fa-cog btn btn-secondary" type="button" id="utility-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./favorites-list.php">Favorites List</a>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Register</a>
<a class="dropdown-item" href="#">Login</a>
</div>
</div>
<!--Search bar-->
<div class="col-auto ml-auto">
<form action="./Part04_Search.php" method="POST" class="form-inline my-2 my-lg-0" id="search-bar">
<input class="form-control mr-sm-2" type="text" name="title-alt" placeholder="Search" aria-label="Search" />
<button class="btn-primary" id="search-btn" type="submit">
Search
</button>
</form>
</div>
</div>