I am having an issue where my Input group is getting stuck behind the navbar and I can't seem to figure out how to fix it. I have tried putting containers around both elements, but that doesn't seem to be working. If anyone has any suggestions or solutions for this issue, I would greatly appreciate the help. Additionally, if you also have insights on why my navbar won't collapse, your assistance would be invaluable.
.navbar-inverse {
background-color: #403F3F;
border-color: #E7E7E7;
border-bottom-width: 7px;
}
.navbar-inverse .navbar-nav > .active a{
background: #E7E7E7;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
background: #E7E7E7;
color: #403F3F;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
-webkit-filter: blur(3px);
}
a {
font: 300 1em/1.5em 'Lato';
font: Light 300 1em/1.5em 'Lato';
font: Light 300 1em/1.5em 'Lato', sans-serif;
color: white;
}
a {
color:white;
-o-transition:color .2s ease-out, background 2s ease-in;
-ms-transition:color .2s ease-out, background 2s ease-in;
-moz-transition:color .2s ease-out, background 2s ease-in;
-webkit-transition:color .2s ease-out, background 2s ease-in;
transition:color .2s ease-out, background 2s ease-in;
}
a:hover {
color:cyan;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<body>
<!-- NAVBAR START -->
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">
<img alt="Brand" width="48" style="margin-top:-13px; margin-left:0px;" src="http://vps52525.vps.ovh.ca/assets/img/bar-logo.png"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav list-hover-slide">
<li class="active"><a href="#"> Backpack</a>
</li>
<li><a href="#"> Price Checker</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right list-hover-slide">
<li><a href="#"> FAQ</a>
</li>
<li><a href="#"> Partners</a>
</li>
<li><a href="#"> Donate</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- NAVBAR END -->
<div id="bg">
<img src="http://vps52525.vps.ovh.ca/assets/img/bk.png" alt="Broken i guess....">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div