Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <!-- Static navbar -->
    <!--- This will not show up until you press the Menu button --->
<div id="login_box" class="login-box">
   <div class="accordion" id="accordion2">
      <div class="accordion-group">
         <div id="collapsemenu" class="accordion-body collapse">
            <div class="accordion-inner">
            <div class="row inner_box">
            <div class="col-md-12">
                <h2>Put any HTML goodies you want here!</h2>
            </div>
            </div>
        </div>
         </div>
      </div>
   </div>
</div>
​
     <!-- Fixed navbar (To make it static simply change to navbar-static-top)-->
    <div class="navbar navbar-default navbar-static-top">
      <div class="container">
         <ul  class="nav navbar-nav list-inline" style="float:right; margin-right: 5em; white-space: nowrap;">
    <div class="accordion-heading">
        </div>
     <button type="button" id="menu_button" class="btn btn-primary navbar-btn" data-toggle="collapse" data-parent="#accordion2" href="#collapsemenu">Menu</button>
</ul>
    <a  class="navbar-brand" href="#">Brand name</a>
      </div>
​
    </div>
    <div class="container">
​
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
​
    </div> <!-- /container -->
​
​
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
constantonpro
0viewers