Bootstrap navbar fixed top toggle not showing - css

Question

I am using the bootstrap navbar fixed at the top and the toggle doesnt show when I resize the browser. I dont know what i am missing but everything else is working fine. I followed the code on the navbar example site here : Fixed top navbar example
<div>
<nav class="navbar navbar-fixed-top navbar-header-full navbar-default">
<div class="header-full-title">
<img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">VISIT</span>
<span class="icon-bar">DIRECTORY</span>
<span class="icon-bar">CONDOS</span>
</button>
</div>
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
CSS
.navStyle{
color:white;
padding:5px 5px 5px 5px;
margin: 0px;
text-decoration:none;
}

Answer 1

Probably because of these:
<div id="navbar" class="navbar-collapse collapse">
<button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" .../>
Removing these collapse properties should make this work
<div id="navbar" class="navbar-collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle=".navbar-collapse" .../>