Content is hidden by navigation bar. How to fix? - html

Question

I've a problem with a website I am working at.
The site has a navigation bar which looks quite good on a bigger desktop screen.
But if I resize the screen it looks ugly and content is hidden behind the navigation bar.
How to fix this? Code is the following for the header:
<nav class="navbar navbar-default navbar-fixed-top" id="navbar-fixed" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
</button>
<a class="navbar-brand" href="index.html">Dummy</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Werke</li>
<li>Kontakt</li>
<li>Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Impressum</li>
</ul>
</div>
</nav>

Answer 1

Think I've found your issue. You need to wrap the menu in another <div> with the id which you have specified in your data-target attribute on the toggle button. And also give it the classes collapse navbar-collapse. So you will have the following for your menu section:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Werke</li>
<li>Kontakt</li>
<li>Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Impressum</li>
</ul>
</div>
I think just adding that div in should fix it. Here is a working jsfiddle: http://jsfiddle.net/Ca7B9/1/