"affix-menu"
Bootstrap 3.0.0 Snippet by efepimenta

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> /* Note: Try to remove the following lines to see the effect of CSS positioning */ .affix { top: 0; width: 100%; } /* .affix .navbar-brand img {*/ /* height: 65px; */ /* -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);*/ /* transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); */ /*} */ .affix + .container-fluid { padding-top: 10px; } .top_bar { min-height:40px; /* background: #30bed6; /* Old browsers */ background: -moz-linear-gradient(left, #30bed6 0%, #38cac9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #30bed6 0%,#38cac9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #30bed6 0%,#38cac9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30bed6', endColorstr='#38cac9',GradientType=1 ); /* IE6-9 */} .social { list-style-type:none; margin-bottom:0px; float:left; padding:0px; margin-left:0px;} .social li { float:left;} .social li a { padding:0 10px; font-size:13px; line-height:40px; color:#FFF;} .rightc { list-style-type:none; margin-bottom:0px; float:right;} .rightc li { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;} .rightc li a { color:#FFF; } .navbar-brand img { margin-top:0px; margin-left:0px;} .navbar-brand {padding:0px;} .header_image { margin-top:-70px; float:left;} .nav.navbar-nav.navbar-right span {font-family: 'Open Sans', sans-serif; font-style:italic; font-weight:300; color:#1b6977;} .navbar-right li a {font-family: 'Open Sans', sans-serif; font-size:16px; color:#1b6977 !important;} </style> </head> <body> <div class="top_bar container-fluid"> <div class="container"> <div class="col-md-6"> <ul class="social"> <li><a target="_blank" href="https://www.webenlance.com/"><i class="fa fa-facebook text-white"></i></a></li> <li><a target="_blank" href="https://webenlance.com"><i class="fa fa-twitter text-white"></i></a></li> <li><a target="_blank" href="http://webenlance.com"><i class="fa fa-instagram text-white"></i></a></li> </ul></div> <div class="col-md-6"> <ul class="rightc"> <li><i class="fa fa-envelope-o"></i> webenlance@gmail.com </li> <li><i class="fa fa-user"></i> <a href="webenlance.com" >Become a Partner</a></li> </ul> </div> </div> </div> <!--top_bar--> <nav class="navbar navbar-default " data-spy="affix" data-offset-top="50" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#"><img src="http://placehold.it/150x50&text=Logo"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>for</span> Patients</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li><a href="#"><span>for</span> Providers</a></li> <li><a href="#"><span>for</span> Partners</a></li> <li><a href="#">Login</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div><div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div><div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>

Related: See More


Questions / Comments: