I'm getting familiar with MDbootstrap and bootstrap 4. I recently created a website using the toggle with no problem however, with this website I'm creating, the toggle won't close once clicked on. I can't seem to figure it out. I have a feeling this is a MDbootstrap error as the I have seen others comment about this but no answer. As I'm learning more about MDBootstrap, I'm running into a lot of errors. Can anyone help me?
HTML
<!--Navbar /Logo-->
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7e57c2;">
<a class="navbar-brand" href="index.html" style="color:#FFF;">Ride with Amy</a>
<!--Toggle Button-->
<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" style="color:#FFF;"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"
href="#about_link" style="color:#FFF;">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#schedule_link" style="color:#FFF;">Schedule</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/ridewithamy/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:#FFF;"></i></a></li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/amy.kaczmarek.3" title="Follow on Linkedin" target="_blank"><i class="fa fa-facebook fa-lg" aria-hidden="true" style="color:#FFF;"></i></a></li>
</ul>
</div>
</nav>
