Bootstrap Nav bar doesn't work properly on mobile - html

Question

I've looked over this code about ten times now and I can't seem to get the nav bar to work properly when on mobile. It just doesn't work when I click on it.
Edit: We're using React to render the navbar to the page. Added the entire JS file so you can take a look.
var NavLoggedIn = React.createClass({
render: function() {
return (
// <div className ="navcontainer">
// <nav>
// <a href='/index'>Index</a>
// <a href='/pod-search'>POD Search</a>
// <a href='/book-now'>Book Now</a>
// <a href='/current-bookings'>Current Bookings</a>
// <a href='/historic-bookings'>Historic Bookings</a>
// <a href='/contact-us'>Contact Us</a>
// <a href='/pod-profile'>pod profile</a>
// <a href='/my-profile'>My profile</a>
// <a href='/login'>Log In</a>
// </nav>
// </div>
< nav className = "navbar-fixed-top navbar-inverse"
id = "navColor" >
< div className = "container-fluid" >
< div className = "navbar-header" >
< button type = "button"
className = "navbar-toggle collapsed"
data - toggle = "collapse"
data - target = "#navbar"
aria - expanded = "false"
aria - controls = "navbar" >
< span className = "icon-bar" > < /span>
<span className="icon-bar"></span >
< span className = "icon-bar" > < /span>
</button >
< /div>
<div id="navbar" className="collapse navbar-collapse" >
<ul className="nav navbar-nav" id="center myNavbar">
<li id="color" >My Profile </li>
<li>POD Search</li>
<li>Current Bookings </li>
<li>Historic Bookings</li>
<li>Contact Us </li>
<li>Log Out </li>
</ul>
</div>
</div>
</nav>
)}
});
var NavLoggedOut = React.createClass({
render: function() {
return (
<div className ="navcontainer">
<nav>
<a href=' / pod - search '>POD Search</a>
<a href=' / contact - us '>Contact Us</a>
<a href=' / login '>Log In</a>
<a href=' / pod - profile '>pod profile</a>
</nav>
</div>
)}
});
var logged = true;
if (logged) {
ReactDOM.render(<NavLoggedIn />, document.getElementById('
navbar '));
} else {
ReactDOM.render(<NavLoggedOut />, document.getElementById('
navbar '));
}
Also when I click on the hamburger button so many times the nav bar vanishes.
Can anyone help me with this?

Answer 1

I had the same problem and worked for me when I switched the data-target field.
Try using this instead.
<nav class="navbar-fixed-top navbar-inverse" id="navColor">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="center myNavbar">
<li id="color">My Profile
</li>
<li>POD Search
</li>
<li>Current Bookings
</li>
<li>Historic Bookings
</li>
<li>Contact Us
</li>
<li>Log Out
</li>
</ul>
</div>