Bootstrap hamburger menu not collapsing - html

Question

I'm building a site in Bootstrap and my hamburger menu is not collapsing. Here is the HTML code:
<section>
<div class="container-fluid main-banner">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
<li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row main-banner-text">
<div class="col-lg-6">
<h1>Know Your Greatness.</h1>
<h3>Develop your passion and align your education with real world needs.</h3>
<div class="top-padding">Your future starts now</div>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</section>
I would appreicate any feedback as I am pretty much stumped at this point. I've tried looking on other threads but haven't found anything yet.

Answer 1

You need to call id used in data-target="#navbarSupportedContent" for show hide navbar div please check below code
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><section>
<div class="container-fluid main-banner">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
<li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row main-banner-text">
<div class="col-lg-6">
<h1>Know Your Greatness.</h1>
<h3>Develop your passion and align your education with real world needs.</h3>
<div class="top-padding">Your future starts now</div>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</section>