<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 ----------> <div class="wrapper"> <div class="navigation navbar-fixed-top"> <div class="short-menu"> </div> <div class="branding-section"> </div> <div class="main-nav"> </div> </div> <section> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 "> <h1> losts of content goes here!! </h1> <p> Caramels marzipan sesame snaps brownie chupa chups carrot cake bonbon fruitcake. Carrot cake sweet roll tiramisu powder. Cheesecake lemon drops macaroon. Icing macaroon cake jelly-o gummi bears tart ice cream lollipop marzipan. Lollipop toffee tart topping cotton candy dragée pudding wafer. Cake apple pie pudding tootsie roll oat cake jelly beans jelly beans cake dessert. Pastry macaroon lemon drops jujubes ice cream icing. Cake dessert brownie danish. Caramels pudding tootsie roll candy canes halvah dragée icing bear claw chocolate bar. Caramels bear claw chocolate cake. Jelly beans jelly-o brownie. Gummies fruitcake chocolate sugar plum cake pudding icing macaroon. Lollipop tiramisu pudding apple pie soufflé toffee. Pie croissant powder macaroon. Sugar plum cotton candy chocolate bar pie marzipan lemon drops powder. Dragée apple pie tart jujubes ice cream candy canes. Cake macaroon fruitcake powder bear claw chocolate bar fruitcake. Powder gummi bears marshmallow candy canes oat cake chupa chups. Croissant biscuit dessert dessert. Soufflé wafer candy canes chocolate bar candy canes marshmallow chupa chups powder gingerbread. Bonbon chocolate cupcake pastry. Bear claw apple pie cookie caramels tart gummies sweet roll. Sweet roll pudding macaroon sweet roll biscuit. Carrot cake topping powder candy donut pastry carrot cake. Croissant jujubes sugar plum sweet roll jujubes pudding pudding. Pastry bonbon powder gummi bears marshmallow pastry. Lemon drops tiramisu apple pie tootsie roll. Donut biscuit ice cream wafer. Sweet roll wafer topping muffin. Donut pudding macaroon toffee topping jelly beans powder toffee gummi bears. Pie tart bear claw pastry wafer halvah. Powder gummi bears cheesecake cookie halvah carrot cake halvah toffee jelly. Danish muffin gingerbread sweet cookie jujubes lollipop ice cream pastry. Jelly cotton candy wafer. Pie brownie marshmallow. Sesame snaps toffee candy canes. Wafer liquorice pudding gingerbread. Marzipan croissant donut cake sweet roll chupa chups donut. Jujubes carrot cake cheesecake gummies muffin cheesecake powder sweet roll danish. Oat cake soufflé oat cake cheesecake lemon drops dessert lollipop dessert. Jelly-o cake ice cream cake pie. Cake marshmallow lollipop danish cookie tiramisu topping sweet roll. Gummies gummies cookie soufflé candy sweet roll liquorice chupa chups. Pie jelly beans candy canes chocolate liquorice muffin lollipop. Candy candy canes bonbon cupcake halvah topping cupcake. Ice cream cheesecake carrot cake. Jelly beans cupcake cake candy canes. Toffee powder gingerbread candy. Sweet roll dragée candy croissant cookie tiramisu cake. Bear claw tootsie roll jelly bonbon. Toffee liquorice liquorice brownie lemon drops dessert. Bear claw jelly lemon drops dragée halvah topping carrot cake biscuit bear claw. Sesame snaps chupa chups jelly beans. Fruitcake donut sugar plum halvah candy canes. Biscuit marshmallow fruitcake. Brownie dessert brownie halvah jelly beans gingerbread. Croissant marshmallow sugar plum. Sweet cake chupa chups sesame snaps sugar plum tootsie roll icing lollipop tootsie roll. Sugar plum chocolate bar muffin jelly chocolate macaroon chocolate cake wafer. Candy canes icing gingerbread. Brownie cookie caramels donut biscuit. Jujubes gingerbread halvah cheesecake chocolate muffin. Tiramisu dessert jelly-o apple pie halvah jelly. Dessert powder toffee chocolate cake halvah cupcake sweet. Cotton candy bear claw cake dragée wafer. </p> </div> </div> </div> </section> </div>

.navigation .short-menu { background-color:#E79801; height:25px; } .navigation .branding-section { background-color:#3E7ADB; height:100px; -o-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .main-nav { background-color:#5F5C5C; height:40px; }

$(document).ready(function() { // calculat the height of navbar and applys to target div. var heightNave = $(".navigation").height(); $('section').css('padding-top', heightNave+'px'); //windows scroll function and get windows size $(window).scroll(function(){ var windowsize = $(window).width(); if ($(window).scrollTop() >= 1) { $('.navigation .short-menu').slideUp('fast'); $('.navigation .branding-section').css({ 'height':'70px' }); } else { $('.navigation .short-menu').slideDown('fast'); $('.navigation .branding-section').css({ 'height':'100px' }); } }); });