Whenever my page is small enough to display the collapsible navbar, you can simply click or tap the icon to open the navbar. However, if you try to click or tap it again, the navbar won't close and I'm uncertain as to why.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">
<a href="/mwlas/" class="navbar-brand">
<img src="/mwlas/_img/logo.png" alt="logo"/>
<span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="/mwlas/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/mwlas/portfolio" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/mwlas/shop" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/mwlas/blog" class="nav-link">Blog</a>
</li>
</ul>
<form class="form-inline">
<button class="btn btn-outline-success my-2 my-sm-0" type="button"
onclick="location.href='/mwlas/login.php'">Login
</button>
</form>
</div>
</nav>
</header>