Nenad Nenad - 1 month ago 14
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.

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

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

<!--jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>


<nav>

<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>

</button>

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

</div>



<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>

<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>
</a>
</li>

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

</div>
</div>
</nav>



Answer

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.