"shrink navbar on scroll"
Bootstrap 3.3.0 Snippet by pvbbogdan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="col-md-12 add">aici intra mini nav</div> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="text-center"> <h1>Bacon template navbar</h1> <p Bacon ipsum dolor amet leberkas venison biltong, flank shank shankle beef ribs. Pig pancetta jowl biltong. Corned beef pig venison bacon strip steak pork chop capicola, pastrami shank doner turducken shankle swine t-bone. Pork belly drumstick beef, meatball ball tip tenderloin brisket pastrami ground round spare ribs landjaeger leberkas rump shankle kevin. Ham hock filet mignon beef ribs boudin. Shankle boudin bacon kielbasa capicola venison picanha. Shankle short loin biltong landjaeger salami doner capicola ribeye ball tip. Turkey ball tip cow cupim andouille chuck. Salami alcatra sirloin shankle beef shoulder landjaeger. Landjaeger ham hock pork, ribeye turkey sirloin sausage kevin t-bone salami fatback. Ribeye turkey pork chop shankle, drumstick filet mignon pancetta pastrami alcatra short ribs chicken cupim flank. Tongue tenderloin pastrami swine landjaeger shankle, cupim pig beef. Rump kevin picanha cupim. Tri-tip picanha drumstick venison bacon. T-bone pastrami pancetta, venison capicola andouille beef ribs. Pastrami tail ribeye cupim flank. Hamburger bresaola pig, t-bone leberkas andouille landjaeger pancetta short ribs chicken. Picanha ham sausage spare ribs swine shankle drumstick tri-tip ribeye pancetta bresaola brisket landjaeger ball tip. Beef venison ham hock, landjaeger pancetta shank turducken short loin jowl shoulder drumstick biltong meatball cupim. Jerky porchetta kevin drumstick pig cow leberkas andouille brisket. Venison kevin strip steak bacon alcatra frankfurter ground round pork. Cow kevin jerky alcatra ham pork chop jowl. Shank frankfurter venison strip steak drumstick. Rump pork chop pastrami biltong ham bresaola meatball. Ribeye alcatra beef bresaola turkey short ribs landjaeger pork belly boudin cow swine. Capicola andouille kevin pastrami alcatra chuck. Porchetta prosciutto shank turducken. Short loin spare ribs rump meatball bresaola ball tip turkey pork cupim. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div><!-- /.container -->
body { padding-top: 50px; } *{ transition: all 0.3s;} nav a { padding-top: 20px !important; padding-bottom: 20px !important; font-size: 18px; } .navbar-inverse{ background-color:#f00; } nav .navbar-toggle { margin: 13px 15px 13px 0; } .navbar-brand { font-size: 30px; } nav.navbar.shrink { min-height: 35px; } nav.shrink a { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px; } nav.shrink .navbar-brand { font-size: 25px; } nav.shrink .navbar-toggle { padding: 4px 5px; margin: 8px 15px 8px 0; } .add{ background-color:#ff0;}
$(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); $('.add').hide(); } else { $('nav').removeClass('shrink'); $('.add').show(); } });

Related: See More


Questions / Comments: