Click here to Skip to main content
15,881,882 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I designed webpage and used bootstrap navbar toggle. IT is not working,
Can anyone help me to solve the issue.?

HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                   <div class="container">

                       <div class="navbar-header">
                           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                               <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="index.html" class="logo"><img src="../images/logo.png" alt="ColorsDress Logo"/></a>
                       </div>

                       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                           <ul class="nav navbar-nav navbar-right custom-menu">
                               <li class="active"><a href="index.html">HOME</a></li>
                               <li><a href="collection.html">COLLECTION</a></li>
                               <li><a href="shows.html">SHOWS</a></li>
                               <li><a href="storelocater.html">STORE LOCATOR</a></li>
                               <li><a href="aboutus.html">ABOUT US</a></li>
                               <li><a href="contactus.html">CONTACT US</a></li>
                               <li><a href="#">LIVE INVENTORY</a></li>
                           </ul>
                       </div>

                   </div>
               </nav>


Thanks in advance.
Posted

You forgot to add the collapsed class to the navbar-toggle button.

Also, make sure you have included the needed css & js files like below

Bootstrap CDN[^]

HTML
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>

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


Demo: Fiddle[^]

(Try to resize the window to see it in action and click the top right icon)
 
Share this answer
 
v4
Comments
Jaison Joe 30-Sep-15 3:05am    
I added these things already. But it is not working. Can you suggest some other solution.
Palash Mondal_ 30-Sep-15 3:22am    
Is the fiddle demo working for you?
Have you included jQuery Core Library JS file in your code ?
If you haven't then include it before your bootstrap.js

-KR
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900