Search code examples
twitter-bootstraptwitter-bootstrap-2

Boostrap 2.3.2 responsive navbar not functioning


On the following website http://www.bestcastleintown.co.uk/excelsa/index.php

The responsive navbar (http://getbootstrap.com/2.3.2/components.html#navbar) component does not seem to be working even though I have included met the 2 requirements. The collapse plugin is featured as part of the overall minified JavaScript file and the responsive Bootstrap CSS file has been included too.

Required responsive CSS

<link href="./css/bootstrap-responsive.min.css" rel="stylesheet">

Required JavaScript

<link href="./js/bootstrap.min.js" rel="stylesheet">

However when the site is viewed in smaller viewports of 979px and below, the small square containing the "hot dog" icon does not drop down and present the navigation items when clicked.


Solution

  • First, you need to have jQuery so the navbar can slide down with the button bootstrap provides. All you need to do is save this file from this site (which is jQuery), and it should work fine.

    Save the file from here into your js folder, and make sure that it is named jquery.min.js:

    http://code.jquery.com/jquery-1.11.1.min.js

    After you have done that, just link the jQuery into your index file, and it should work. Just make sure you link it like this:

    <!DOCTYPE html>
    <html>
     <head>
        <title>Site</title>
        <link href="css/boostrap.min.css" rel="stylesheet">
     </head>
    <body>
    
    <!-- JS at end of page for faster page loading -->
    <script src="js/jquery.min.js"></script>
    <script src="js/boostrap.min.js"></script>
    </body>
    </html>
    

    and your javascript tags need to be at the end of the page. As I have done in this example.

    OR, If it still doesn't work:

    Do it this way: (just make sure that your index.html is outside of all other files and folders and your css and js is also outside)

    <link href="css/boostrap.min.css" rel="stylesheet">
    

    example: (*star indicates a folder)

    *css
    *fonts
    *js
    index.html
    

    Also, just make sure you download the newest version of bootstrap on their site: getboostrap.com. Just to make sure you understand the bootstrap 3, you should read up on the bootstraps new grid system. http://www.getboostrap.com/css/#grid

    Let me know if this helps, -M.