Navigation won't collapse to "sandwich"
Hi you savers of lost coding souls:
I am still coding my site, and the navigation won't collapse into a "sandwich" when I reduce the screen size. It used to, and then just stopped. I fubar'ed something somewhere.
You can see the page at Kairos Prison Ministry.
The pertinent css is:
body {
font-family: Calibri;
}
#wrapper {
padding-left: 0px;
padding-right: 0px;
}
#nav {
text-align: center;
}
header {
width: 100%;
background-color:#fff;
}
#navbar {
border-radius: 0px;
border: 0px;
margin-bottom: 0px;
background-color: #3458B8;
}
.dropdown-menu li {
float: left;
width: 100%;
margin: 0;
padding: 0;
border-bottom: 0px;
}
.bg-primary {
background-color: #3458B8;
}
.navbar-default {
-webkit-box-shadow: inset 0px 0px;
box-shadow: 0px 0px;
border-width: 0px;
border-color: #3458B8;
background-color: #3458B8;
border-radius: 0px;
border: 0px;
}
.navbar-nav {
border-radius: 0px;
border: 0px;
color: #3458B8;
width: 100%;
text-align: center;
}
.navbar-nav li {
float: none;
display: inline-block;
color:#fff;
}
.navbar-default .navbar-nav > li > a {
color:#fff;
}
.blue {
background: #bdd0e8;
color: #3458B8
}
.dkblue {
background: #3458B8;
color: #3458B8;
width:100%;
}
nav nav-pills nav-stacked ul li active {
background: #3458B8;
}
.centered-pills {
text-align: center;
background: #3458B8;
}
.centered-pills ul.nav-pills {
display: inline-block;
}
.centered-pills li {
display: inline;
}
/**change stacked nav on md-lg displays**/
@media (min-width: 600px) {
.nav-stacked > li {
display: inline-block;
}
.nav-stacked > li + li {
margin-top: 0;
margin-left: 2px;
}
}
AdChoices