HTML - Collapsed navigation menu not displaying menu items
HTML - Collapsed navigation menu not displaying menu items
I am new to web development and HTML. Could you tell me why my navigation bar menu items are not appearing in the collapsed navigation menu when the screen resizes to a smaller screen.
The collapsed navigation menu on the right, is missing the menu items. Using Bootstrap 3
<html>
<head>
<meta charset="UTF-8">
<title>My First Web App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
</head>
<body>
<nav class = "navbar navbar-inverse" >
<div class = "container-fluid">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle = "collapse" data-target = "topNavBar">
<span class = "icon-bar" ></span>
<span class = "icon-bar" ></span>
<span class = "icon-bar" ></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
</div>
<div class="collapse navbar-collapse" id="topNavBar">
<!-- Collapsed menu itemsItems -->
<ul class="nav navbar-nav">
<li><a href="#"><span aria-hidden="true"></span> Python</a></li>
<li><a href="#"><span aria-hidden="true"></span> Java</a></li>
<li><a href="#"><span aria-hidden="true"></span> C++</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Me
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
@MaximilianBoth I tried with and without the #, and it still was not working. It was the jQuery script causing the problem for me. Cheers
– DBoyDev
Feb 1 at 0:14
You need to include de # character by default. You are welcome.
– Maximilian Both
Feb 1 at 0:19
1 Answer
1
<html>
<head>
<meta charset="UTF-8">
<title>My First Web App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navbar navbar-inverse" >
<div class = "container-fluid">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#topNavBar"> <!--here-->
<span class = "icon-bar" ></span>
<span class = "icon-bar" ></span>
<span class = "icon-bar" ></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
</div>
<div class="collapse navbar-collapse" id="topNavBar">
<!-- Collapsed menu itemsItems -->
<ul class="nav navbar-nav">
<li><a href="#"><span aria-hidden="true"></span> Python</a></li>
<li><a href="#"><span aria-hidden="true"></span> Java</a></li>
<li><a href="#"><span aria-hidden="true"></span> C++</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Me
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Because of a typo. You need to add # before the data-target attribute. Also you didn't load the jQuerry script.
– Maximilian Both
Jan 31 at 23:50