<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/lumen/bootstrap.min.css" rel="stylesheet"> <header role="banner" class="navbar navbar-fixed-top navbar-inverse fixedScrollTop"> <div id="header1" class="top-bar"> <nav> <div class="hidden-xs"> <div class="container"> <div class="col-md-12"> <ul id="navigateLinkTop" class="nav navbar-nav navbar-right"> <li><a href="#">Link 001</a></li> <li><a href="#">Link 002</a></li> <li><a href="#">Link 003</a></li> <li><a href="#">Link 004</a></li> </ul> </div> </div> </div> </nav> </div> <!-- #header1 --> <div id="header2"> <nav class="navbar-inverse"> <div class="container"> <div class="navbar-header"> <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-right"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a href="#" class="navbar-brand"> <img src="http://placehold.it/277x50&text=LOGO" alt="..." height="50"> <span class="baseline-brand">Baseline Logo</span> </a> </div> <div class="navbar-inverse side-collapse in pull-right"> <div class="navbar-background"></div> <nav role="navigation" class="navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#Home">Home</a></li> <li><a href="#About">About-us</a></li> <li><a href="#Gallery">Gallery</a></li> <li><a href="#Pricing">Pricing</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> </div> </div> </nav> </div> <!-- #header2 --> </header> <div class="container side-collapse-container"> <section> <!-- Carrousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li> <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li> <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1150x350/3498db/FFFFFF" alt="..."> <div class="carousel-caption"><h3>Caption Text 001</h3></div> </div> <div class="item"> <img src="http://placehold.it/1150x350/9b59b6/FFFFFF" alt="..."> <div class="carousel-caption"><h3>Caption Text 002</h3></div> </div> <div class="item"> <img src="http://placehold.it/1150x350/c0392b/FFFFFF" alt="..."> <div class="carousel-caption"><h3>Caption Text 003</h3></div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> </section> <!-- Container-site --> <section> <div class="row"> <div class="col-sm-4"> <img src="http://placehold.it/748x333&text=image" alt="..." class="img-responsive img-rounded"> <h3>Lorem ipsum</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum<br><br></p> <ul> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> </ul> <p class="text-center"><a href="#" class="btn btn-primary">Show more <i class="fa fa-chevron-right"></i></a></p> </div> <div class="col-sm-4"> <img src="http://placehold.it/748x333&text=image" alt="..." class="img-responsive img-rounded"> <h3>Lorem ipsum</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum<br><br></p> <ul> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> </ul> <p class="text-center"><a href="#" class="btn btn-primary">Show more <i class="fa fa-chevron-right"></i></a></p> </div> <div class="col-sm-4"> <img src="http://placehold.it/748x333&text=image" alt="..." class="img-responsive img-rounded"> <h3>Lorem ipsum</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum<br><br></p> <ul> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> <li>Excepteur sint occaecat cupidatat non proident</li> <li>Ut enim ad minim veniam, quis nostrud</li> </ul> <p class="text-center"><a href="#" class="btn btn-primary">Show more <i class="fa fa-chevron-right"></i></a></p> </div> </div> </section> </div>

@media screen and (max-width: 768px) { .side-collapse-container{width:100%;position:relative;left:0;transition:left .4s} .side-collapse-container.out{right:200px} .side-collapse {top:72px;bottom:0;right:0;width:200px;position:fixed;overflow:hidden;transition:width .4s} .stickyHeader .side-collapse {top:55px} .side-collapse.in {width:0} .navbar-toggle{margin-top:12px} .navbar-background {position:absolute;display:block;height:100%;width:100%;background-color:#2793CB} #header2 .navbar-collapse{overflow-x:scroll;z-index:1000000;max-height:100%!important;border:medium none} } section{padding-bottom:30px} .side-collapse-container{margin-top:120px} .navbar-inverse{background-color:#FFF;border-color:transparent} #header1 { background-color: #FFF; border: medium none; border-radius: 0px; top: 0px; } #header1 a{font-size:12px;color:#777;padding:13px 6px 12px} #header1 a:hover{color:#337AB7;text-decoration:underline} /* HEADER 2 */ #header2{background-color:#FFF;border:none;border-bottom:2px solid rgba(0,0,0,0.1);border-radius:0;-moz-border-radius:0;-webkit-border-radius:0} #header2 .navbar-brand{text-align:center;height:70px;padding:5px} #header2 .navbar-brand > img{display:block} #header2 .baseline-brand{font-family:Arial,Helvetica,sans-serif;color:#337ab7;font-size:12px;font-weight:100;text-transform:uppercase;letter-spacing:3px} #header2 .navbar-nav > li > a{text-transform:uppercase;margin:20px 10px;padding:10px;font-size:12px;color:#474747;background-color:transparent} #header2 .navbar-nav > li.dropdown > a .fa{color:#b8b8b8;font-size:14px} header.navbar{min-height:55px} /* on scroll */ .stickyHeader #header1{top:-45px;position:absolute;height:0} .stickyHeader #header2 .navbar-nav > li > a{padding:5px;margin:15px 10px 6px 10px} .stickyHeader #header2 .navbar-brand{padding:12px 0px 0 0;height:auto} .stickyHeader .navbar-brand img{height:30px; transition:all .4s ease-out; -moz-transition:all .4s ease-out; -webkit-transition:all .4s ease-out; } .stickyHeader .navbar-brand .baseline-brand{display:none} @media (max-width:768px){ .baseline-brand{display:none} }

$(document).ready(function() { var sideslider = $('[data-toggle=collapse-side]'); var sel = sideslider.attr('data-target'); var sel2 = sideslider.attr('data-target-2'); sideslider.click(function(event){ $(sel).toggleClass('in'); $(sel2).toggleClass('out'); }); }); // On scroll add class $(window).scroll(function() { var scroll = $(window).scrollTop(); //SCROLL AVEC SLIDER if (scroll >= 100) { $(".fixedScrollTop").addClass("stickyHeader"); } else { $(".fixedScrollTop").removeClass("stickyHeader"); } });