CODEWITHSUNDEEP
twitter-bootstrapnavbar
Joshua Stevens-Stein
Joshua Stevens-Stein

Reputation: 428

bootstrap collapsed navbar buggy open

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>

Upvotes: 8

Views: 9027

Answers (2)

Yash Munjal
Yash Munjal

Reputation: 31

In most cases of my bug i actually found out that defining position:absolute; or position:relative made the

Upvotes: 0

Muzamil Abbas
Muzamil Abbas

Reputation: 702

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;
}

Upvotes: 31

Related Questions