Navbar collapse button (three bars) not working when screen too small

Question

My nav bar in Bootstrap does not come down when the screen gets too small. On mobile, for example, it doesn't work unless the phone is in landscape mode. Here is my code:

<nav class="navbar navbar-default">
   <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.html">
                <img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
            </a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="/blog">BLOG</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

I'm not too familiar with Bootstrap, so I can't tell if there's something glaringly obvious I'm doing wrong. Is there any reason why the collapse button would not drop-down after the screen gets too small?

    <!DOCTYPE html>
<html lang="en">
<head>
        <title> My site! </title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
    <script src="js/index.js"></script>
    <!-- Typing effect on homepage is in js/typed.js --> 
    <script src="js/typed.js"></script>



    <link rel="stylessheet" type="text/css" href="bootstrap-social-gh-pages/bootstrap-social.css">
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="css/styles.css">



</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="index.html">
                    <img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
                </a>

            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="/blog">BLOG</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container-fluid text-center push-center" >
        <div style="background:transparent !important" class="jumbotron">
            <h1 id="main">Hi there</h1>
            <p> <i class="fa fa-globe" aria-hidden="true"></i> <span class="element"></span> </p> 

            <p> <i class="fa fa-briefcase" aria-hidden="true"></i> <span class="element1"></span> </p> 

            <p> <span class="element2"> </span> <span class="rest"></span> </p> 


        </div>

    </div>




</body>

</html>

Have you included the bootsrap js in your page? Please try adding bootstrap.min.js. The responsive navbar requires the collapse plugin. — Hector Barbossa, Jun 10 '16 at 18:54
Is the layout being correctly rearranged when you narrow the screen on a desktop device? If so, perhaps you've forgotten the viewport meta tag: http://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device — Serlite, Jun 10 '16 at 18:55
Yes, I have bootstrap.js. No, it is not when I narrow the screen on a desktop. — AlwaysQuestioning, Jun 10 '16 at 18:55
The given code works fine as can be [seen here](https://jsfiddle.net/e0d8my79/133/). Please check your browser console for javascript errors. — AndrewL64, Jun 10 '16 at 19:01
The same code is working fine for me. Which browser are you using? — Hector Barbossa, Jun 10 '16 at 19:06
I'm using chrome both on my desktop and mobile phone. It's only once the window gets smaller than a certain amount that it stops dropping down. If it's working for everyone, it must be something in a CSS file or .js file, no? — AlwaysQuestioning, Jun 10 '16 at 19:07

Navbar collapse button (three bars) not working when screen too small

0 Answers0