Regarding a Nav Bar that keeps going out of control - html

Question

I got this NavBar and no matter what I do to it, it looks really horrible for responsiveness. I can't even get the logo to respond when I shrink my window size down
html
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 href="index.html">
<img class="img-responsive" src="app/images/Wildwood_Home_Logo.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left" style="background-color:white !important">
<li>WHAT WE MAKE</li>
<li>WHO WE ARE</li>
<li>WHAT THEY SAID</li>
<li>WHAT WE WON</li>
<li>WHAT YOU'LL SEE</li>
<li>WHERE TO BUY</li>
<li>SHOP ONLINE</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar-default {
background-color:#83A4C4;
}
.navbar-brand {
height: 100%;
padding: 0;
}
.navbar-default .navbar-nav>li>a {
color: #FFFFFF;
}
.navbar-toggle {
background-color: white;
}
.navbar-toggle .icon-bar {
background-color: #83A4C4 !important;
}
#media (max-width: 767px) and (min-width: 1310px)
{
.navbar-default .navbar-nav .open .dropdown-menu>li>a
{
color:white;
}
}
the media query I was messing around with, I just had it set to max-width of 767px

Answer 1

go to the bootstrap online documentation and take the code exactly as it is then modify, this is the code of navbar, delete the parts you don't want in your page
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">Brand</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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>