Broken navbar-collapse in Bootstrap - html

Question

im making new website based on bootstrap but everytime i click the button when navbar-collapsed it breaks down, also i would like to get the line where it is supposed to be (at the bottom of navbar) and collapse button in the middle of logo but i couldnt figure it out
HTML
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Zobrazit navigaci</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="logo.png" width="50px" height="50px"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Škola <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Výroční zprávy
</li>
<li>
Zaměstnanci
</li>
<li>
Historie
</li>
<li>
Kompletní informace
</li>
</ul>
</li>
<li class="dropdown">
Studium <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Informační technologie
</li>
<li>
Agropodnikání
</li>
<li>
Obchodní akademie
</li>
<li>
Maturity
</li>
<li>
Formuláře
</li>
<li>
Třídy
</li>
</ul>
</li>
<li class="dropdown">
Jídelna <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Jídelníček
</li>
<li>
Přihlašování obědů
</li>
</ul>
</li>
<li>
Domov mládeže
</li>
<li>
Galerie
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
html,
body {
height: 100%;
font-family: 'Open Sans', sans-serif;
}
.navbar-fixed-top {
background-color: #5b5147;
border-color: transparent;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
height: 100px;
text-transform: uppercase;
}
.navbar-inverse li {
padding-top: 20px;
}
.navbar-brand {
padding-top: 20px;
}
body {
padding-top: 100px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
height: 500px;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.center-block {
float:none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: center;
}
#ikonky{
color: #5c6465;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}

Answer 1

If you change this
.navbar-fixed-top {
height: 100px;
}
to this:
.navbar-fixed-top {
min-height: 100px;
}
The background color should show through on the menu when it's open.