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>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="container">
    <div class="row">
      <div class="col-md-12 menu navbar-fixed-top">
        <div class="col-md-6">
          <ul class="nav navbar-nav pull-left">
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
          </ul>
        </div>
        <div class="col-md-6">
          <ul class="nav navbar-nav pull-right">
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
     
    <div class="row">
      <div class="col-xs-12 cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae rutrum magna. Etiam posuere nisi ligula, eu pulvinar tellus faucibus consectetur. Quisque sit amet finibus lorem, et dapibus neque. Vivamus dictum augue eget consequat dignissim. Duis sed neque quis arcu tempus interdum. Duis ac nulla turpis. Cras tempor, magna ac dapibus rutrum, tortor lacus pulvinar ligula, non tincidunt justo eros quis lorem. Aliquam id orci nec leo faucibus volutpat.</p>
​
<p>Quisque venenatis lobortis lorem, id egestas orci. Nullam in quam faucibus dui elementum laoreet vitae quis risus. Pellentesque euismod faucibus odio a ultrices. Praesent justo nisi, tincidunt ut placerat pharetra, egestas sit amet sapien. Nunc lacinia nibh a dui hendrerit lacinia vitae aliquet nisl. Vivamus congue nulla vitae orci vulputate tempor. Nunc a dui est. Cras ac gravida dui, quis vehicula dui. Sed vehicula tortor laoreet ultricies lobortis. Cras fermentum nibh sit amet lectus bibendum, et scelerisque turpis pulvinar. Morbi tincidunt magna nec lacinia commodo. Nullam et aliquet elit.</p>
​
<p>Mauris tristique risus vitae risus accumsan maximus. Mauris eu tellus at justo rutrum suscipit non nec justo. Phasellus turpis metus, facilisis ut congue sed, placerat eu ex. Vestibulum et lacus dolor. Curabitur rhoncus ultrices dolor, at suscipit erat facilisis ac. Sed metus leo, semper vel nibh lacinia, rutrum sagittis sapien. Nulla placerat auctor eros vitae faucibus. Aenean ullamcorper, velit et posuere aliquet, ante eros fermentum felis, eget pharetra turpis est in arcu. Nunc bibendum ipsum ante, ac aliquet massa faucibus ac. In aliquet, erat et malesuada fringilla, diam urna consequat nisl, non mattis nisl velit nec ex.</p>
​
<p>Aliquam tempor mauris id nulla aliquet accumsan. Vivamus tincidunt non felis sit amet molestie. Morbi in ipsum turpis. Aenean efficitur luctus gravida. Duis ac feugiat augue. Nunc porta nec urna eget maximus. Aliquam at rutrum eros. Curabitur porttitor tincidunt leo, ut pretium nunc aliquet at. Cras et urna eget velit eleifend pellentesque. Morbi fringilla molestie augue ac tincidunt. Nullam tincidunt scelerisque elit, quis maximus nisl dapibus at. Praesent quis lobortis massa. Ut vitae risus vitae risus tincidunt tristique. Nullam quis pulvinar nulla. Quisque eu sapien ultricies, eleifend velit sit amet, tempor massa.</p>
​
<p>Vestibulum bibendum, est a tempor porta, elit massa vehicula erat, non placerat leo odio eu erat. Nam volutpat risus at est condimentum interdum. Donec gravida tellus tellus, nec semper sapien tincidunt vitae. Integer efficitur leo ut nulla dignissim, ac vulputate ligula semper. Maecenas cursus venenatis ultricies. Praesent eu ligula sit amet dolor blandit facilisis in nec urna. Curabitur non gravida quam, a mattis erat. Phasellus aliquam lectus eu mattis volutpat. Suspendisse volutpat felis libero, eget porttitor mauris convallis a. Fusce bibendum, orci congue finibus mattis, ligula erat euismod mauris, et mattis ex mi ut dolor.</p>        
​
<p>Aliquam tempor mauris id nulla aliquet accumsan. Vivamus tincidunt non felis sit amet molestie. Morbi in ipsum turpis. Aenean efficitur luctus gravida. Duis ac feugiat augue. Nunc porta nec urna eget maximus. Aliquam at rutrum eros. Curabitur porttitor tincidunt leo, ut pretium nunc aliquet at. Cras et urna eget velit eleifend pellentesque. Morbi fringilla molestie augue ac tincidunt. Nullam tincidunt scelerisque elit, quis maximus nisl dapibus at. Praesent quis lobortis massa. Ut vitae risus vitae risus tincidunt tristique. Nullam quis pulvinar nulla. Quisque eu sapien ultricies, eleifend velit sit amet, tempor massa.</p>
​
<p>Vestibulum bibendum, est a tempor porta, elit massa vehicula erat, non placerat leo odio eu erat. Nam volutpat risus at est condimentum interdum. Donec gravida tellus tellus, nec semper sapien tincidunt vitae. Integer efficitur leo ut nulla dignissim, ac vulputate ligula semper. Maecenas cursus venenatis ultricies. Praesent eu ligula sit amet dolor blandit facilisis in nec urna. Curabitur non gravida quam, a mattis erat. Phasellus aliquam lectus eu mattis volutpat. Suspendisse volutpat felis libero, eget porttitor mauris convallis a. Fusce bibendum, orci congue finibus mattis, ligula erat euismod mauris, et mattis ex mi ut <p>Aliquam tempor mauris id nulla aliquet accumsan. Vivamus tincidunt non felis sit amet molestie. Morbi in ipsum turpis. Aenean efficitur luctus gravida. Duis ac feugiat augue. Nunc porta nec urna eget maximus. Aliquam at rutrum eros. Curabitur porttitor tincidunt leo, ut pretium nunc aliquet at. Cras et urna eget velit eleifend pellentesque. Morbi fringilla molestie augue ac tincidunt. Nullam tincidunt scelerisque elit, quis maximus nisl dapibus at. Praesent quis lobortis massa. Ut vitae risus vitae risus tincidunt tristique. Nullam quis pulvinar nulla. Quisque eu sapien ultricies, eleifend velit sit amet, tempor massa.</p>
​
<p>Vestibulum bibendum, est a tempor porta, elit massa vehicula erat, non placerat leo odio eu erat. Nam volutpat risus at est condimentum interdum. Donec gravida tellus tellus, nec semper sapien tincidunt vitae. Integer efficitur leo ut nulla dignissim, ac vulputate ligula semper. Maecenas cursus venenatis ultricies. Praesent eu ligula sit amet dolor blandit facilisis in nec urna. Curabitur non gravida quam, a mattis erat. Phasellus aliquam lectus eu mattis volutpat. Suspendisse volutpat felis libero, eget porttitor mauris convallis a. Fusce bibendum, orci congue finibus mattis, ligula erat euismod mauris, et mattis ex mi ut       
      </div>
    </div>
  </div>
      
</body>
</html>
 
.menu {
  color: #eee;
  background: #A8C5D7 
}
.menu li a {
color: #eee;
  border-radius: 0;
  transition: 0.3s;
  cursor: default;
}
.menu li a:hover{
color: #555
}
.menu-container {
  position:relative;
  z-index:10;  
}
.menu-1 {
  background:lightgreen;
  position:fixed;
}
.menu-2 {
  background:lightcoral;
  position:fixed;
  top:10px;
}
.cont {
  margin-top: 50px
}
​
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers