Nenad Nenad - 1 year ago 145
HTML Question

why doesn't Bootstrap-data-toggle work?

so i have got this code ( the data-toggle and data-target are black in my n++ also i used data target instead of data-target which shows me red..)

i want to make my page responsive for mobile users and large desktop users.
but when i zoom in to the display, there is on the right top corner the button which should open the drop down menu, but it doesn't.

<title>Built your Website</title>
<meta charset="UTF-8">

<link rel="stylesheet" href="style.css">

<!--jQuery library -->
<script src=""></script>

<!-- Latest compiled JavaScript -->
<script src=""></script>

<link rel="stylesheet" href="">



<nav class="navbar navbar-default navbar-static-top"> <!-- color, statisch-->
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data target=".navbar-collapse "> <!-- button, navbar mit dropmenu wenn bildschirm zu klein-->

<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- creates 3 lines in the toggle navigation when screen too little -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>


<a class="navbar-brand" href="index.php">TAIL
<!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> -->


<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<!--<li><a class="navbar-brand" href="index.php">TAIL</a></li>-->
<li class="dropdown"> <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a></li>
<li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a></li>

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up
<span class="glyphicon glyphicon-user" id="sserIcon"></span>

<li class="dropdown">
<a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In
<span class="glyphicon glyphicon-log-in" id="logIcon"></span>


Answer Source

You have an missing dash in your code. Instead of this:

data target=".navbar-collapse "

do this:

data-target=".navbar-collapse "

And then it works.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download