Mobile Menu toggler won't show content from Mega Menu - mobile

Question

I'm working on a Responsive Mega Menu and I can't seem to get it to open the mobile toggler/display nav links.
I've looked into a few different fixes but as a beginner (still in school) they're outside of my scope of understanding.
A) One Solution suggested a conflicting issue where they needed to !important a display.
B) The other solution I found suggested that the ID/Selectors weren't targeting properly. (I think this might be my issue... but I'm not sure what ID/Selectors would be causing the problem as I've tried playing around with them and not really got anywhere.)
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="section">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/images/logonobg2.png" alt="Musical Logo" width="200" aria-hidden="true">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dropdown01" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown megamenu-li">
<a class="nav-link" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu megamenu" aria-labelledby="dropdown01">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>More Links</h5>
<a class="dropdown-item" href="#">Staff & Volunteers</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu-li">
<a class="nav-link" href="" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Education & Community</a>
<div class="dropdown-menu megamenu" aria-labelledby="dropdown02">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h5>Musical in School</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">MiS Gallery</a>
<a class="dropdown-item" href="#">Booking / Fees</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Summer Music Institute</h5>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Certain Events Awards</h5>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
.section {
padding: 3px 50px;
background-color: black;
}
.nav-link {
color: aliceblue;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
border-radius: 0%;
opacity: 95%;
}
.navbar {
padding-left: 15%;
margin: 1rem 2rem;
background-color: #26272b !important;
}
/* Styles TopNav Logo away from Nav-links in normal view and in the responsive menu. */
.topnavlogo {
margin-bottom: 2px;
}
.container-fluid {
align-content: space-around;
}
/* affects all top nav besides Home (.Disabled) */
.navbar a:hover {
color: #f17917;
}
/* This section wraps the top nav */
.section {
background-color: #26272b;
}
.dropdown-menu {
border-radius: 0%;
}
/* TOP NAV SEARCH FORM STYLES BEGIN */
/* TOP NAV SEARCH FORM STYLES BEGIN
-------------------------------------- */
.form-control:focus {
border-color: #f17917;
box-shadow: none; /* removes blue hue/shadow from topnav search text input */
}
.btn {
border-color: #f17917;
color: #f17917;
margin-right: 20%;
}
.btn:hover {
background-color: #f17917;
border-color: #f17917;
}
/* TOP NAV SEARCH FORM STYLES END */
/* Top Nav Styles End */
/* Main Styles Begin */
main {
margin: 7rem 4rem;
text-align: justify;
}
/* Main Styles End */
http://jsfiddle.net/uhrzo30p