3

try to start learning about Bootstrap. i create little code to create responsive menu, like this

<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Application Name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>

my question is, why when i try to select menu in small browser, menu does not show ? can some one tell me why? thanks

3 Answers 3

14

My geuss is that you didn't load jQuery. Place this in your header and see if it works:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Also i suggest to load the bootstrap js file also in the header, just after the jQuery library.

5

It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js

0

Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.

I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.

1
  • This is used to speed up loading of page and issue is because of the above told reason. @DemPorkChops Commented Feb 4, 2017 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.