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 lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
​
    <title>Fixed Top Navbar Example for Bootstrap</title>
​
    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
​
​
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
​
  <body id="pagetop">
​
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="hidden"><a href="#pagetop"></a></li>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </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 -->
    
    <div class="container">
      <div id="Intro">
        <h1>Intro</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl feugiat luctus placerat, mi risus mattis velit, dapibus venenatis orci elit nec nisl. Duis nec maximus eros. Nulla sed purus condimentum dui sagittis dignissim quis maximus nulla. Vivamus tempor tortor et augue laoreet vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vulputate sapien eu tristique lobortis. Vivamus hendrerit, neque eget ornare malesuada, nulla lorem ultricies arcu, placerat volutpat nisl massa et nisl. In hac habitasse platea dictumst. Sed metus orci, pulvinar ut mattis in, tristique et quam. Sed vel velit vel leo hendrerit facilisis et ornare nulla. Integer vitae tellus commodo, accumsan erat sit amet, consequat tortor. Nullam imperdiet justo vitae tincidunt pellentesque. Duis non urna sodales, consequat odio gravida, viverra mauris.
​
Sed lectus purus, malesuada sed malesuada id, placerat a orci. Curabitur vitae laoreet ligula, vitae suscipit odio. Suspendisse potenti. Sed mattis vitae mi quis mollis. Curabitur convallis sem et nunc blandit pretium. Quisque tristique imperdiet consectetur. Proin id orci tempus nisl vestibulum scelerisque. Nunc consequat est nulla, sagittis suscipit arcu gravida ac. Aliquam sed vestibulum ligula, ut vestibulum lacus. Vivamus nulla tortor, laoreet ac fermentum non, venenatis sit amet eros. Donec odio quam, elementum eget euismod at, euismod quis orci. Integer a augue velit.
​
Nullam ut diam non nibh iaculis bibendum. Nullam mi neque, vulputate eget risus eu, dapibus malesuada neque. Donec sem orci, mollis eget ultrices eget, efficitur quis dolor. Sed nec libero commodo, dictum ante faucibus, dictum purus. Morbi vitae tellus at leo malesuada efficitur sed et nisl. Suspendisse ac vestibulum justo. Nulla malesuada risus quis elit sagittis pharetra nec et libero. Aliquam aliquet metus a nulla elementum, id feugiat eros condimentum. Pellentesque vitae purus risus.
​
Nulla aliquam eros eu tortor semper feugiat. Maecenas iaculis consequat dolor ut congue. Nullam pellentesque ipsum a tincidunt accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu ultrices est. Fusce pellentesque sit amet purus ut sagittis. Maecenas sit amet velit ante. Nunc et pharetra nisl. Pellentesque facilisis nisi et lacus consectetur accumsan. Maecenas maximus purus augue, eu euismod felis varius eu.
​
Sed luctus imperdiet convallis. Quisque sed pellentesque massa. Cras ac nisl id lorem pellentesque eleifend. Ut lectus eros, convallis quis venenatis eget, dictum eget lacus. Mauris mattis, massa id ornare auctor, justo urna sagittis mauris, ut pharetra arcu ligula vel dui. Aliquam vitae ligula at enim mollis commodo. Donec porttitor arcu sed purus lobortis scelerisque.</p>
      </div>
      
      <div id="home">
        <h1>Home</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl feugiat luctus placerat, mi risus mattis velit, dapibus venenatis orci elit nec nisl. Duis nec maximus eros. Nulla sed purus condimentum dui sagittis dignissim quis maximus nulla. Vivamus tempor tortor et augue laoreet vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vulputate sapien eu tristique lobortis. Vivamus hendrerit, neque eget ornare malesuada, nulla lorem ultricies arcu, placerat volutpat nisl massa et nisl. In hac habitasse platea dictumst. Sed metus orci, pulvinar ut mattis in, tristique et quam. Sed vel velit vel leo hendrerit facilisis et ornare nulla. Integer vitae tellus commodo, accumsan erat sit amet, consequat tortor. Nullam imperdiet justo vitae tincidunt pellentesque. Duis non urna sodales, consequat odio gravida, viverra mauris.
​
Sed lectus purus, malesuada sed malesuada id, placerat a orci. Curabitur vitae laoreet ligula, vitae suscipit odio. Suspendisse potenti. Sed mattis vitae mi quis mollis. Curabitur convallis sem et nunc blandit pretium. Quisque tristique imperdiet consectetur. Proin id orci tempus nisl vestibulum scelerisque. Nunc consequat est nulla, sagittis suscipit arcu gravida ac. Aliquam sed vestibulum ligula, ut vestibulum lacus. Vivamus nulla tortor, laoreet ac fermentum non, venenatis sit amet eros. Donec odio quam, elementum eget euismod at, euismod quis orci. Integer a augue velit.
​
Nullam ut diam non nibh iaculis bibendum. Nullam mi neque, vulputate eget risus eu, dapibus malesuada neque. Donec sem orci, mollis eget ultrices eget, efficitur quis dolor. Sed nec libero commodo, dictum ante faucibus, dictum purus. Morbi vitae tellus at leo malesuada efficitur sed et nisl. Suspendisse ac vestibulum justo. Nulla malesuada risus quis elit sagittis pharetra nec et libero. Aliquam aliquet metus a nulla elementum, id feugiat eros condimentum. Pellentesque vitae purus risus.
​
Nulla aliquam eros eu tortor semper feugiat. Maecenas iaculis consequat dolor ut congue. Nullam pellentesque ipsum a tincidunt accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu ultrices est. Fusce pellentesque sit amet purus ut sagittis. Maecenas sit amet velit ante. Nunc et pharetra nisl. Pellentesque facilisis nisi et lacus consectetur accumsan. Maecenas maximus purus augue, eu euismod felis varius eu.
​
Sed luctus imperdiet convallis. Quisque sed pellentesque massa. Cras ac nisl id lorem pellentesque eleifend. Ut lectus eros, convallis quis venenatis eget, dictum eget lacus. Mauris mattis, massa id ornare auctor, justo urna sagittis mauris, ut pharetra arcu ligula vel dui. Aliquam vitae ligula at enim mollis commodo. Donec porttitor arcu sed purus lobortis scelerisque.</p>
      </div>
      
      <div id="about">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl feugiat luctus placerat, mi risus mattis velit, dapibus venenatis orci elit nec nisl. Duis nec maximus eros. Nulla sed purus condimentum dui sagittis dignissim quis maximus nulla. Vivamus tempor tortor et augue laoreet vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vulputate sapien eu tristique lobortis. Vivamus hendrerit, neque eget ornare malesuada, nulla lorem ultricies arcu, placerat volutpat nisl massa et nisl. In hac habitasse platea dictumst. Sed metus orci, pulvinar ut mattis in, tristique et quam. Sed vel velit vel leo hendrerit facilisis et ornare nulla. Integer vitae tellus commodo, accumsan erat sit amet, consequat tortor. Nullam imperdiet justo vitae tincidunt pellentesque. Duis non urna sodales, consequat odio gravida, viverra mauris.
​
Sed lectus purus, malesuada sed malesuada id, placerat a orci. Curabitur vitae laoreet ligula, vitae suscipit odio. Suspendisse potenti. Sed mattis vitae mi quis mollis. Curabitur convallis sem et nunc blandit pretium. Quisque tristique imperdiet consectetur. Proin id orci tempus nisl vestibulum scelerisque. Nunc consequat est nulla, sagittis suscipit arcu gravida ac. Aliquam sed vestibulum ligula, ut vestibulum lacus. Vivamus nulla tortor, laoreet ac fermentum non, venenatis sit amet eros. Donec odio quam, elementum eget euismod at, euismod quis orci. Integer a augue velit.
​
Nullam ut diam non nibh iaculis bibendum. Nullam mi neque, vulputate eget risus eu, dapibus malesuada neque. Donec sem orci, mollis eget ultrices eget, efficitur quis dolor. Sed nec libero commodo, dictum ante faucibus, dictum purus. Morbi vitae tellus at leo malesuada efficitur sed et nisl. Suspendisse ac vestibulum justo. Nulla malesuada risus quis elit sagittis pharetra nec et libero. Aliquam aliquet metus a nulla elementum, id feugiat eros condimentum. Pellentesque vitae purus risus.
​
Nulla aliquam eros eu tortor semper feugiat. Maecenas iaculis consequat dolor ut congue. Nullam pellentesque ipsum a tincidunt accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu ultrices est. Fusce pellentesque sit amet purus ut sagittis. Maecenas sit amet velit ante. Nunc et pharetra nisl. Pellentesque facilisis nisi et lacus consectetur accumsan. Maecenas maximus purus augue, eu euismod felis varius eu.
​
Sed luctus imperdiet convallis. Quisque sed pellentesque massa. Cras ac nisl id lorem pellentesque eleifend. Ut lectus eros, convallis quis venenatis eget, dictum eget lacus. Mauris mattis, massa id ornare auctor, justo urna sagittis mauris, ut pharetra arcu ligula vel dui. Aliquam vitae ligula at enim mollis commodo. Donec porttitor arcu sed purus lobortis scelerisque.</p>
      </div>
    </div>
​
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
​
​
  </body>
</html>
​
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers