CODEWITHSUNDEEP
htmltwitter-bootstrap-3navbarnav
Bas
Bas

Reputation: 5

My bootstrap 3 responsive navbar doesn't collapse.

I just started this project but I just can't get the navbar right. Read every same question on stack but I can't figure it out. Tried the jquery everywhere and screened my code now about a 100 times. 

<title>Dit is Bas</title>

<meta name "viewport" content="width=device-width, initial-scale=1.0">

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

<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="javascript/bootstrap.js"></script>


</head>
<body>
    <header>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="collapse navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Bas</a>
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Photo's</a></li>
                        <li><a href="#">About Bas</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>

Hopefully somebody will see the problem.

Thanks in advance!

Upvotes: 0

Views: 6250

Answers (1)

Dejan Marolt
Dejan Marolt

Reputation: 146

The problem lies in data-target="collapse navbar-collapse" which should be id of div that has items of menu. For transitions to work in Bootstrap you need jquery.js before bootstrap.js.

You should have something like this to have working navbar.

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#important-id-for-collapsing" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="important-id-for-collapsing">
            <ul class="nav navbar-nav">
                <li><a href="#">Link #1</a></li>
                <li><a href="#">Link #2</a></li>
                <li><a href="#">Link #3</a></li>
            </ul>
        </div>
    </div>
</nav>

Here's a link to JSFiddle.

Upvotes: 1

Related Questions