my bootstrap navbar not working properly - html

Question

i am new in bootstrap and having some difficulty in navbar (mobile view). i have added a navbar and added a toggle button, but it doesn't seems to be working perfectly. i am following the steps as told in tutorials and examples but still don't get the result right. navbar is toggling but when i click the toggle button, it toggles in and off simultaneously. also the toggle button is visible even on larger screen.
here's my code
<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 tell me where i am doing it wrong? i am using bootstrap version 4.0

Answer 1

It works fine when I copied your code to this snippet. Are you sure you included the bootstrap js & css files along with jquery in your code? If so, then something else that you haven't posted must be interfering.
You need to add your own css to hide it on a larger screen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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>