Bootstrap 3 Fixed Top Navigation Bar

Question

I am trying to use Bootstrap 3 fixed top navigation bar. But when I decrease the browser screen size and click the button its not showing any links

Here is the code

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"> </head> <body> <!-- Creating a Fixed (top) Navigation Bar with Dropdown --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Exclusive</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Products</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </div> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script src="bootstrap/js/jquery-1.11.3.js"></script> </body> </html>

But on resizing and clicking the toggle button it doesn't display links

I have included jquery files that are required.

your code is working fine it might issue with including js jsfiddle.net/7ny02kjf — Himesh Aadeshara
– Himesh Aadeshara, Commented Aug 27, 2015 at 6:49
change your .js order - keep jquery first and bootstrap.js second ! + use only one bootstrap.js - either .min.js or normal .js — Deepak Yadav
– Deepak Yadav, Commented Aug 27, 2015 at 6:58

Guruprasad J Rao · Accepted Answer · 2015-08-27 05:42:54Z

You will get script error $ is undefined because the way you are loading scripts which is as below is wrong.

<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this--> <script src="bootstrap/js/bootstrap.js"></script> <!--or this--> <script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->

Before loading any .js files you need to load jquery-*.js

So ultimately you need

<script src="bootstrap/js/jquery-1.11.3.js"></script> <script src="bootstrap/js/bootstrap.js"></script>

So you can either use bootstrap.js or bootstrap.min.js but not both. That will create conflict!

DEMO

Thanks brother , got it right. Jquery should be the first and then bootstrap js
@MahtabAlam Do not forget to mark it as answer if it helped!!

Smith Lee · Accepted Answer · 2015-08-27 06:50:02Z

You have a mistake on your code.

first jQuery.js. and, next bootstrap.js
change <div class="navbar" ...></div> to <nav class="navbar" ...></nav>

[Result] https://jsfiddle.net/u2v1nLpb/3/

<body> <!-- Creating a Fixed (top) Navigation Bar with Dropdown --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Exclusive</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Products</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </nav> <script src="bootstrap/js/jquery-1.11.3.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> </body>

Yash Mangla · Accepted Answer · 2015-08-27 08:49:47Z

it's not the Error. Its Bootstrap 3 Responsive Page Feature. When You Open your page in Small Screen or On Mobile Phones then it will Automatically Adjust your Template Page View.

When you Click your Right Icon then You can see your Links there..

I think this is the solution Which you Want:

if you Want appeared Links when you Open your page on small Devices. then you must need to change class-name in your HTML Page.

instead of "navbar-Collapse" and "Collapse" use "navbar-Expand" and "Expand"

Note: please include your js file in a Priority Sequence. it will help you in future development.

<script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script>

my HTML code is here:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <!-- Creating a Fixed (top) Navigation Bar with Dropdown --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle " data-toggle="Expand" data-target=".navbar-Expand"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Exclusive</a> </div> <div class="navbar-Expand Expand"> <ul class="nav navbar-nav"> <li><a href="#" class="text-center">Products</a></li> <li><a href="#" class="text-center">Blog</a></li> <li><a href="#" class="text-center">About</a></li> <li><a href="#" class="text-center">Contact Us</a></li> </ul> </div> </div> </div>	<script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

see the output image:

Collectives™ on Stack Overflow

Bootstrap 3 Fixed Top Navigation Bar

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related