CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Mahtab Alam
Mahtab Alam

Reputation: 627

Bootstrap 3 Fixed Top Navigation Bar

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>

enter image description here

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

enter image description here

I have included jquery files that are required.

Upvotes: 0

Views: 4793

Answers (3)

Yash Mangla
Yash Mangla

Reputation: 133

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:

enter image description here

Upvotes: 0

Smith Lee
Smith Lee

Reputation: 340

You have a mistake on your code.

  1. first jQuery.js. and, next bootstrap.js

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

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 1

Related Questions