skip to Main Content

Hi my problem is that the button doesn’t work, I can’t find where I’m wrong. Any help? Also I’m new in Twitter Bootstrap.<button type="buttton" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="buttton" 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">Mitashki</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>  
            </ul>
        </div>
    </div>
</div>

4

Answers


  1. You’re probably going to smack yourself for this. You should erase that extra “t” in

    <button type="buttton"...
    
    Login or Signup to reply.
  2. When you use Bootstrap , it’s good if use basic template .

    Basic Template

    And your problem : collapse navbars in Bootstrap uses bootstrap.js . And this file based on jQuery . So in bottom of your code you must add both files .

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    
    Login or Signup to reply.
  3. Here is your button

    Paspartu, the button that you are referring to is the sandwich that appears when your viewport is small enough. Try shrinking your browser until you see this.

    Login or Signup to reply.
  4. Buttton should be Button

    <button type="buttton" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    

    should be

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    

    Also, if your button is not responsive, then you would need to add this to your header page:

     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
     <!-- Latest compiled JavaScript -->
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    

    Add this first to your header. Your button that isn’t responding needs JQUERY to work (and I took the links from W3schools for answering purposes)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search