Reputation: 94
I have a website with a navbar. On mobiles or when the screen is too small, i can toggle to hide or see by clicking a button. This works grand. However , how can i get it to hide by default as it takes up most of the screen
Working with bootstrap 3.0
<div class ="navbar navbar-inverse navbar-static-top" role ="navigation">
<div class ="container">
<div class ="navbar-header">
<button type ="button" class ="navbar-toggle" data-toggle ="collapse" data-target=".navbar-collapse">
<span class ="sr-only">Toggle navigation </span>
<span class ="icon-bar"></span>
<span class ="icon-bar"></span>
<span class ="icon-bar"></span>
</button>
<a class ="navbar-brand" href ="#"> Work Experience</a>
</div>
<div class ="navbar-collapse collaspe">
<ul class ="nav navbar-nav navbar-right">
<li ><a href ="index.php">Home ⌂</a></li>
<li class ="active"> <a href ="#">Records 👀</a></li>
<li> <a href ="logout.php">logout 🔒</a></li>
</ul>
</div>
</div>
</div>
Thanks
Upvotes: 1
Views: 2259
Reputation: 2399
You had a lot of mistakes in your code.
You cant use data-target=".navbar-collapse"
to access element with class like that in html.
You should use the ID of the element.
This the correct code, rewritten from zero:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#you-cant-use-class-like-that" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Work Experience</a>
</div>
<div class="collapse navbar-collapse" id="you-cant-use-class-like-that">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php">Home ⌂</a>
</li>
<li class="active"><a href="#">Records 👀</a>
</li>
<li><a href="logout.php">logout 🔒</a>
</li>
</ul>
</div>
</div>
</nav>
Upvotes: 1