After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, but still not achieving the desired outcome. The navbar toggles smoothly; however, upon clicking the toggle button, it flickers on and off simultaneously. Another issue is that the toggle button remains visible even on larger screens.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" class="collapse navbar-collapse">
<nav id="nav-area">
<ul class="nav-bar-list">
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Tools</a>
</li>
<li>
<a>Services</a>
</li>
<li class="contact-button">
<a>Contact</a>
</li>
</ul>
</nav>
</div>
Please guide me on rectifying my mistake. My current version of Bootstrap is 4.0.