Bootstrap's collapsible navbar - html

Question

My Bootstrap collapsible menu isn't working. I can't figure out where is my problem?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>

Answer 1

You have duplicate attributes for class in multiple divs as well as multiple data-toggle="collapse" & data-target="myNavbar".
Also your target ID has the # in it, it should not: id="#myNavbar" should be id="myNavbar"
Validate your HTML and refer to the refer to the Docs
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNavbar" class="collapse navbar-collapse menu">
<ul class="nav navbar-nav navbar-right">
<li class="active scrollable">About me
</li>
<li class="scrollable">Portfolio
</li>
<li class="scrollable">Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

The problem was with:
Your collapse navbar hierarchy.
The div where you used menu class.
Syntax
The anchor tag: <a class="navbar-brand" href="#top">the company</a> should come after button tag.
And the menu class should be used along with other classes: <div id="myNavbar" class="menu collapse navbar-collapse">, instead of <div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<div id="#myNavbar" should be changed to <div id="myNavbar". Remove the #, you don't need it while adding id to the div.
And final issue: Don't use data-toggle="collapse" data-target="myNavbar"> again in the ul tag. Just use <ul class="nav navbar-nav navbar-right">
Try running the code snippet below and don't forget to include Bootstrap and jQuery libraries in your webpage. Cheers!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">the company</a>
</div>
<div id="myNavbar" class="menu collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>