"Logo Header Responsive"
Bootstrap 4.0.0 Snippet by rahmansurya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="header"> <div class="container clearfix"> <h1 id="logo"> <img src="https://bprnbp31.com/po-content/nbp31/assets/images/logo-white.png"> </h1> <nav> <a href="">Lorem</a> <a href="">Ipsum</a> <a href="">Dolor</a> </nav> </div> </div>
.header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #3b8dbd; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } .header h1#logo { display: inline=block; height: 150px; float: left; margin-left:50px; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header nav { display: inline=block; float: right; margin-right:50px; } .header nav a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header nav a:hover { color: white; } .header.smaller { height: 75px; } .header.smaller h1#logo { width: 150px; height: 75px; font-size: 30px; } .header.smaller nav a { line-height: 75px; } /*-----------MEDIA QUERIES*/ @media all and (max-width: 660px) { .header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height:100px; text-align: center; } .header nav { display: block; float: none; height: 50px; line-height:50px; text-align: center; margin: 0 auto; } .header nav a { line-height: 50px; margin: 0 10px; } .header.smaller { height: 75px; } .header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } .header.smaller nav { height: 35px; line-height:35px; } .header.smaller nav a { line-height: 35px; } }
$(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".header").addClass('smaller'); } else { $(".header").removeClass("smaller"); } }); });

Related: See More


Questions / Comments: