Struggling to create a responsive navbar using Bootstrap 4? I've managed to show the toggle button, but can't get the link items to display when clicked. I've tried various solutions including rearranging the order of scripts, but still no luck. Can anyone provide assistance with this issue?
Here is the header code:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Nav Bar</title>
</head>
Here is the body code:
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">TarotByPoonam</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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<button type="submit" class="rounded btn btn-danger">Logout</button>
</ul>
</div>
</div>
</nav>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>