CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user1658953
user1658953

Reputation: 99

Bootstrap Responsive Nav Bar

I am probably missing something quite small and it's frustrating me as I have been sitting here for a few hours now trying to work this out. The Navbar will not link with the Javascript. The button appears when the window is resized correctly however will not collapse the menu when clicked.

Quick look at my Links in my Header (Just in case they are in the wrong order)

    <link rel="stylesheet" href="/assets/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/assets/css/style.css?v=2">

<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-BootStrap--><script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/script.js"></script>
<script src="/assets/js/bootstrap-fileupload.js"></script>

Quick look at my HTML -

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
    <!--<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    <div class="span4">
        <a href="{site_url}" title="People Team">
        <img src="/assets/img/logo.png" alt="People Team Logo" />
        </a>
    </div>
    <nav>
        <div class="nav-collapse">
        <ul class="nav">
        <li{if segment_1 == ""} class="active"{/if}>
            <a href="/" title="Home">Home</a>
        </li>
        <li{if segment_1 == "services"} {/if}>
            <a href="/services" title="Contact People Team">Services</a>
        </li>
        <li{if segment_1 == "about"} {/if}>
            <a href="/about" title="About People Team">About the team</a>
        </li>
        <li{if segment_1 == "contact"} {/if}>
            <a href="/contact" title="Contact People Team">Contact Us</a>
        </li>
        </ul>   
    </div>

I assumed the Javascript is within the Bootstrap.min.js or Bootstrap.js files which are required for the navbar to work. I am just about stumped. Any help would be appreciated.

Cheers,

Upvotes: 7

Views: 3001

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75409

Change the order that your JS loads in. jQuery first, bootstrap plugins second.

<script src="/assets/js/jquery-1.7.1.min.js"></script>
<script src="/assets/js/bootstrap.js"></script>  -- remove, as it is not really needed when including the minified version
<script src="/assets/js/bootstrap.min.js"></script>

Upvotes: 5

Related Questions