1

I downloaded a bootstrap theme menu from bootswatch.com. this is the link http://bootswatch.com/lumen/

And then I copied and pasted the Header Menu code from bootswatch and tried to run it in my localhost. The bootstrap seems to be not working. When the screen is not maximized, there is a box-like button, with three horizontal lines in the upper far-right side. When I click it, it is not working, but in the bootswatch website, it is working.. what seems to be the problem?

this is the jsfiddle of it.. http://jsfiddle.net/tSUUL/2/

<html>
<head>
<link type="text/css"  href="bootstrap/bootstrap.css" rel="stylesheet">
<link type="text/css"  href="bootstrap/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="navbar navbar-inverse">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img border="0" src="images/logo.png" alt="My Treats by Angie Lee" width="200" height="150"/>
        <a class="navbar-brand" href="#">My Treats by Angie Lee</a>
      </div>

      <div class="navbar-collapse collapse navbar-inverse-collapse">
      </br>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Cart</a></li>
          <li><a href="#">Policies</a></li>
        </ul>
        <form class="navbar-form navbar-right">
          <input type="text" class="form-control col-lg-8" placeholder="Search">
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Register</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>

</body>
</html>
jgillich
  • 71,459
  • 6
  • 57
  • 85
user1023
  • 39
  • 1
  • 7

2 Answers2

1

The menu appears using javascript, but you do not have any on your page. The javascript is already written and is part of bootstrap, you just need to import it. A line like this should do the trick for you, assuming you have that file in the bootstrap folder.

<script type="text/javascript" src="bootstrap/bootstrap.js" charset="UTF-8"></script>

EDIT: I just noticed that you also don't have jQuery, which is also needed for bootstrap. You will need to download jQuery and also include that in the page like this:

<script type="text/javascript" src="jquery/jquery.js" charset="UTF-8"></script>

You can download jQuery here.

Andrew
  • 1,963
  • 3
  • 25
  • 35
0

I was using bootswatch as an external css. I had the same issue. I just replaced this part of modal code in my css file

.fade {/* opacity: 0; */-webkit-transition: opacity 0.15s linear;transition:opacity 0.15s linear;}
.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before{display:table;content:" "}.modal-footer:after,.modal-header:after{clear:both;}

and it worked for me.

Also add these file <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

knigalye
  • 956
  • 1
  • 13
  • 19