Click here to Skip to main content
15,180,707 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)
   
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
   
v2

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



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