"header 01"
Bootstrap 3.3.0 Snippet by sbmumbai

<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 ----------> <header class="header navbar-fixed-top"> <!-- Navbar --> <nav class="navbar" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="menu-container js_nav-item"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle navigation</span> <span class="toggle-icon"></span> </button> <!-- Logo --> <div class="logo"> <a class="logo-wrap" href="#body"> <img class="logo-img" src="http://via.placeholder.com/100x50" alt="Asentus Logo"> </a> </div> <!-- End Logo --> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse nav-collapse"> <div class="menu-container"> <ul class="nav navbar-nav navbar-nav-right"> <li class="js_nav-item nav-item active"><a class="nav-item-child nav-item-hover" href="#body">Home</a></li> <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#about">About</a></li> <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#experience">Experience</a></li> <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#work">Work</a></li> <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#contact">Contact</a></li> </ul> </div> </div> <!-- End Navbar Collapse --> </div> </nav> <!-- Navbar --> </header> http://www.free-css.com/template-categories/bootstrap https://themewagon.com/themes/ http://markup.themewagon.com/reign-v2.0/showcase/ https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540 https://www.sitepoint.com/creative-grid-system-sass-calc/ http://thesassway.com/intermediate/simple-grid-mixins https://woocommerce.com/flexslider/ http://kevinbatdorf.github.io/liquidslider/ http://jacksbox.de/stuff/jquery-fractionslider/
.header .navbar,.header .navbar-toggle .toggle-icon,.service .service-element,.service .service-info,.service:hover .service-element,.service:hover .service-info,.social-icons,.social-icons:hover { transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .social-icons { width: 40px; height: 40px; font-size: 16px; color: #515769; background: #fff; border-radius: 50%; padding: 11px } .social-icons:hover { color: #fff; background: #515769 } .promo-banner { text-align: center } .promo-banner .promo-banner-title { font-size: 50px; color: #fff } .promo-banner .promo-banner-text { font-size: 20px; color: #fff; opacity: .8 } .promo-block { background: #fafafa; padding-top: 220px } .promo-block .promo-block-title { font-size: 70px; line-height: 1 } @media (max-width: 480px) { .promo-block .promo-block-title { font-size:50px } } .promo-block .promo-block-text { font-size: 25px } .promo-block .promo-block-img-wrap { position: relative; height: 400px } .promo-block .promo-block-img { position: absolute; right: 0; bottom: 0 } @media (max-width: 768px) { .promo-block { text-align:center; padding-top: 170px } .promo-block .promo-block-img-wrap { height: auto } .promo-block .promo-block-img { position: relative; margin-left: auto; margin-right: auto } } .service { background: #fff; padding: 30px } .service .service-element,.service .service-info { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .service .service-icon { display: block; font-size: 30px; color: #999caa; margin-bottom: 30px } .service:hover .service-element { opacity: 0; -webkit-transform: translate3d(0,-100%,0); -moz-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } .service:hover .service-info { -webkit-transform: translate3d(0,-30%,0); -moz-transform: translate3d(0,-30%,0); transform: translate3d(0,-30%,0) } .footer .footer-logo { width: 76px; height: auto } .navbar-fixed-top .navbar-collapse { max-height: 100% } .header .navbar { background: #fff; margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.2) } .header .navbar-toggle { width: 25px; height: 25px; border: none; padding: 0; margin: 35px 0 } .header .navbar-toggle .toggle-icon { position: relative; width: 21px; height: 1px; display: inline-block; background: #515769 } .header .navbar-toggle .toggle-icon:after,.header .navbar-toggle .toggle-icon:before { position: absolute; left: 0; background: #515769; content: " " } .header .navbar-toggle:hover .toggle-icon,.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before { background: #17bed2; transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .header .navbar-toggle .toggle-icon:before { width: 10px; height: 1px; bottom: 10px; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .header .navbar-toggle .toggle-icon:after { width: 16px; height: 1px; top: -5px; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before { width: 21px; height: 1px } .header .navbar-toggle:hover .toggle-icon.is-clicked { background: rgba(81,87,105,0) } .header .logo { width: 100px; height: 100px; float: left; max-height: 95px; line-height: 65px } .header .logo-wrap { display: inline-block; padding: 15px 0 } .header .logo-img { display: inline-block; width: 76px; height: auto; max-width: 100%; max-height: 100%; vertical-align: middle } .header .nav-item,.header .nav-item-child { display: block; position: relative } .header .navbar-nav { padding-left: 0; margin-bottom: 0; list-style: none } .header .nav-item:last-child .nav-item-child { padding-right: 0 } .header .nav-item.active .nav-item-hover:after,.header .nav-item:hover .nav-item-hover:after { opacity: 1; transition-duration: .4s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .header .nav-item-child { font-size: 13px; font-weight: 600; color: #515769; line-height: 55px; padding: 20px; transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .header .nav-item-child:focus,.header .nav-item-child:hover { background: inherit } .header .nav-item-hover { position: relative } .header .nav-item-hover:after { position: absolute; top: 45px; left: 0; width: 9px; height: 2px; background: #17bed2; opacity: 0; content: " "; transition-duration: .4s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } @media (max-width: 991px) { .header { background:#fff } .header .navbar-toggle { display: block } .header .navbar-collapse.collapse { display: none!important } .header .navbar-collapse.collapse.in { display: block!important } .header .nav-collapse { padding-left: 0; padding-right: 0 } .header .navbar-nav { margin: 0; float: none } .header .navbar-nav .nav-item { float: none } .header .menu-container:after,.header .menu-container:before { content: " "; display: table } .header .menu-container:after { clear: both } .header .nav-item-child { color: #515769; line-height: 1.4; padding: 12px 12px 12px 15px } .header .nav-item-hover:after { position: absolute; top: 19px } } @media (max-width: 767px) { .header .menu-container { padding-left:15px; padding-right: 15px; margin-left: 0; margin-right: 0 } .header .navbar>.container,.header .navbar>.container>.nav-collapse { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0 } .header .navbar>.container { width: auto } } @media (min-width: 992px) { .header .navbar-nav-right { float:right } .page-on-scroll .header .nav-item-child,.page-on-scroll .header .navbar { transition-duration: .3s; transition-property: all; transition-timing-function: cubic-bezier(.7,1,.7,1) } .page-on-scroll .header .navbar { background: #fff; border-bottom-color: #f0f0f0 } .page-on-scroll .header .nav-item-child { color: #515769 } }

Related: See More


Questions / Comments: