Hey guys, I’m working on my portfolio page project, and I seem to have gotten myself into a small bind. I spent quite some time on constructing a navbar that toggles when the page is minimized or is viewed on a small screen. Everything seems to mostly be working, except when the toggler button is pressed. The links appear briefly, but then disappear back behind the button. Could someone here explain to me what’s going on, and how I can fix the problem?
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #551A8B">
<div class="navbar-brand">Nine Worlds</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#Home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About Me">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
Also, link to the pen: Portfolio project