Menu
Trouble with the bootstrap collapsed navbar. The navbar at the foot of the page collapses fine, but when attempting to open in the collapsed state using the collapse navbar button, the navbar will only open for a second and then immediately closes. I do have to click twice for it to reopen again (and then apparently close), so I suspect that it is indeed open, but not viewable (i.e. it is technically closing on the second click).
a {text-decoration:none; font-family: EB Garamond;-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.navbar-header {
padding-right:20px;
}
.navbar-header > a > i{
color: #777;
padding-top: 10px;
padding-left:10px;
padding-right:10px;
}
.navbar-header > a > i:hover{
color: white;
text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.navbar-footer > li {
padding-left:5px;
padding-right:5px;
}
body {
background: url(./img/home-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 50px;
}
.jumbotron {
background-color: rgba(255,255,255, 0.5);
color: inherit;
}
#banner-txt {
position-left: -50px;
}
#banner-txt > h1 {
font-size: 500%;
font-family: EB Garamond;
color: #96281B;
}
@media (max-width: 1100px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
#brand{
margin-top: -10px;
width: 40px;
height: 40px;
background: url(./img/brand-999.png);
background-size: 40px auto;
}
#brand:hover{
background: url(./img/brand-fff.png);
background-size: 40px auto;
-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href= "css/bootstrap.min.css" rel="stylesheet">
<link href = "index.css" rel = "stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="./index.html">
<div id="brand">
</div>
</a>
</div>
<div class="navbar-header pull-right">
<a href=""><i class="fa fa-twitter fa-2x"></i></a>
<a href=""><i class="fa fa-facebook fa-2x"></i></a>
<a href=""></i></a>
</div>
</div>
<br><br><br><br>
<div class="container">
<div class="pull-left" id="banner-txt">
<h1>SPORTS TEAM HOMEPAGE</h1>
<p>
</p>
</div>
</div>
<div class = "container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class= "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navFooterCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navFooterCollapse">
<ul class="nav navbar-nav navbar-footer">
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">ROSTER</a></li>
<li><a href="#">STRENGTH AND CONDITIONING</a></li>
<li><a href="#">RESULTS</a></li>
<li><a href="#">PROGRAM</a></li>
<li><a href="#">MERCH</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
204
I have recently encounters this bug.
I have added this piece of code in css and it works for me. I hope it will work fine for you as well.
.navbar-collapse.collapse.in {
display: block!important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
