"nav"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rkchauhan/pen/VamPVa?depth=everything&limit=all&order=popularity&page=19&q=material+&show_forks=false" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Ravikumar Chauhan"> <!-- Meta and Opengraph tags --> <meta name="description" content="Material Design Mediahawkz.com Fixed & Responsive Header with Sidebar, mediahawkz.com v2.1"> <meta name="keywords" content="material design, fixed header, responsive header, sidebar"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'> <style class="cp-pen-styles">/* ----------------------------------------------------- Material Design Mediahawkz.com Fixed & Responsive Header with Sidebar CodePen URL: https://codepen.io/rkchauhan/pen/VamPVa By: Ravikumar Chauhan Find me on:- * Twitter: https://twitter.com/rkchauhan01 * Facebook: https://www.facebook.com/ravi032chauhan * GitHub: https://github.com/rkchauhan * CodePen: https://codepen.io/rkchauhan * UpLabs: http://uplabs.com/rkchauhan01 Thanks to:- * Google Material design - https://www.google.com/design/spec/material-design/introduction.html * Google Material Color - https://www.google.com/design/spec/style/color.html * Google Material Icons - https://design.google.com/icons/ * Roboto Font - https://google.com/fonts/specimen/Roboto * Font Awesome - http://fontawesome.io * jQuery - https://jquery.com -------------------------------------------------------- */ /* ----------------------------------------------------- Body -------------------------------------------------------- */ body { margin: 0; padding: 0; color: #646360; font-size: 16px; font-family: 'Roboto', sans-serif; background-color: #eee; } *, *::after, *::before { -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } a { color: #03a9f4; outline: none; text-decoration: none; } a:hover { text-decoration: underline; } .overlay { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.285); z-index: 1001; } /* For Typography */ .ul-base { margin: 0; padding: 0; list-style: none; } /* ----------------------------------------------------- Clearfix -------------------------------------------------------- */ .clearfix { *zoom: 1; } .clearfix::after { content: ''; display: table; line-height: 0; clear: both; } /* ----------------------------------------------------- Header -------------------------------------------------------- */ header { display: block; position: fixed; top: 0px; left: 0px; width: 100%; background-color: #fff; z-index: 1000; } header .header-inner { width: 100%; height: 64px; color: #fff; padding: 0 20px; background-color: #3f51b5; box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3); } header .nav-btn { cursor: pointer; display: inline-block; width: 40px; height: 40px; line-height: 38px; margin: 12px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } header .nav-btn.nav-slider { float: left; } header .nav-btn.search { display: none; } header .nav-btn i { vertical-align: middle; } header .header-logo { display: inline-block; overflow: hidden; float: left; padding: 21px 38px 21px 5px; } header .header-logo img { display: block; max-height: 21px; vertical-align: middle; } header .header-categories { display: block; position: relative; float: left; border-left: 1px solid rgba(255, 255, 255, 0.157); } header .header-search { float: left; display: block; position: relative; width: calc(100% - 620px); height: 64px; margin: 0 auto; padding: 10px 0; border-left: 1px solid rgba(255, 255, 255, 0.157); border-right: 1px solid rgba(255, 255, 255, 0.157); } header .header-search .search { display: block; position: relative; width: calc(100% - 35px); margin: 0 auto; } header .header-search .search i { position: absolute; top: 8px; left: 10px; color: rgba(255, 255, 255, 0.6); font-size: 28px; cursor: pointer; } header .header-search .search input[type="search"] { width: 100%; height: 44px; padding: 0 15px 0 50px; color: rgba(255, 255, 255, 0.8); font-size: 16px; outline: none; border: none; border-radius: 2px; background-color: rgba(255, 255, 255, 0.2); } header .header-search .search ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } header .header-search .search ::-moz-placeholder { color: rgba(255, 255, 255, 0.8); } header .header-search .search :-moz-placeholder { color: rgba(255, 255, 255, 0.8); } header .header-search .search :-ms-input-placeholder { color: rgba(255, 255, 255, 0.8); } header .header-menu { float: right; } header .header-menu ul { height: 64px; } header .header-menu ul li { display: block; position: relative; float: left; margin: 0; padding: 0 0 0 12px; line-height: 64px; } header .header-menu ul li a { color: #fff; font-size: 17px; padding: 4px; } header .header-menu ul li a:hover { opacity: 0.6; text-decoration: none; } @media only screen and (max-width: 1024px) { header .header-categories { display: none; } header .header-search { width: calc(100% - 440px); } } @media only screen and (max-width: 860px) { header .header-search { display: none; } header .header-menu ul li:last-child { display: none; } } @media only screen and (max-width: 480px) { header .header-inner { padding: 0 12px; text-align: center; } header .nav-btn { background-color: rgba(0, 0, 0, 0.175); } header .header-logo { float: right; padding-left: 0px; padding-right: 0px; } header .header-menu { display: none; } } /* ----------------------------------------------------- Nav -------------------------------------------------------- */ nav { overflow-y: auto; position: fixed; top: 0px; left: -250px; width: 250px; height: 100%; color: #fff; background-color: #f9f9f9; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0.9; z-index: 1002; } nav .nav-header { display: block; background-color: #3f51b5; } nav .nav-header .logo-wrap { padding: 1.7em 1em; } nav .nav-header .logo-wrap .logo-icon { display: inline-block; text-decoration: none; } nav .nav-header .logo-wrap .logo-icon img { display: block; border-radius: 50%; } nav .nav-header .logo-wrap .logo-text { display: inline-block; color: #fff; font-size: 1.2em; vertical-align: 12px; margin-left: 8px; text-decoration: none; } nav .nav-header .nav-search { position: relative; height: 40px; } nav .nav-header .nav-search .search { display: block; position: relative; } nav .nav-header .nav-search .search i { position: absolute; top: 8px; right: .7em; color: rgba(255, 255, 255, 0.6); font-size: 24px; cursor: pointer; } nav .nav-header .nav-search .search input[type="search"] { width: 100%; height: 40px; color: rgba(255, 255, 255, 0.8); font-size: 15px; padding: 0 48px 0 20px; outline: none; border: none; background-color: rgba(255, 255, 255, 0.2); } nav .nav-header .nav-search .search ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } nav .nav-header .nav-search .search ::-moz-placeholder { color: rgba(255, 255, 255, 0.8); } nav .nav-header .nav-search .search :-moz-placeholder { color: rgba(255, 255, 255, 0.8); } nav .nav-header .nav-search .search :-ms-input-placeholder { color: rgba(255, 255, 255, 0.8); } nav .nav-categories li { display: block; position: relative; } nav .nav-categories li a { display: block; width: 100%; font-size: 1rem; color: #5c5c5c; padding: .625em 1.3em; text-decoration: none; } nav .nav-categories li a:hover { background-color: rgba(0, 0, 0, 0.1); } nav.open { left: 0px; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.275); opacity: 1; } nav .nav-separator { width: 100%; height: 1px; margin: 7px 0; background-color: rgba(0, 0, 0, 0.175); } nav .nav-link-title { display: block; color: #3f51b5; font-size: 1rem; padding: .5em 1.3em; } nav .social { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 4px 0; border-top: 1px solid rgba(0, 0, 0, 0.155); border-bottom: 1px solid rgba(0, 0, 0, 0.155); } nav .social li { display: inline-block; position: relative; width: 25%; height: 28px; margin: 0; padding: 0; text-align: center; line-height: 28px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-right: 1px solid rgba(0, 0, 0, 0.175); } nav .social li:last-child { border-right: 0; } nav .social li a { display: block; color: #5c5c5c; font-size: 15px; padding: 2px; text-decoration: none; } nav .social li a.twitter:hover { color: #00baf0; } nav .social li a.facebook:hover { color: #3b5997; } nav .social li a.google-plus:hover { color: #c43c2c; } nav .social li a.rss:hover { color: #ff6600; } nav .copyright { display: block; color: #5c5c5c; text-align: center; padding: .5em 0 1em; } nav .copyright span { display: block; width: 100%; font-size: 11px; margin-bottom: 4px; } /* ----------------------------------------------------- Dropdown Menu -------------------------------------------------------- */ li.dropdown { display: inline-block; position: relative; } li.dropdown a { display: block; height: 64px; padding: 0 35px; color: #fff; font-size: 17px; line-height: 64px; text-decoration: none; } li.dropdown a i { vertical-align: middle; } li.dropdown .dropdown-menu { display: none; overflow: hidden; position: absolute; top: 100%; left: 0px; min-width: 240px; margin: 2px 0; padding: 5px 0; text-align: left; border-radius: 2px; background-color: #3f51b5; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; } li.dropdown .dropdown-menu li { display: block; } li.dropdown .dropdown-menu li a { display: block; height: 40px; font-size: 1em; line-height: 40px; text-decoration: none; } li.dropdown.open .dropdown-menu { display: block; } </style></head><body> <!-- nav --> <nav class="sidebar"> <div class="nav-header"> <div class="logo-wrap"> <a class="logo-icon" href="http://www.mediahawkz.com/"><img alt="logo-icon" src="http://mediahawkz.com/assets/images/favicons/apple-icon-72x72.png" width="40"></a> <a class="logo-text" href="http://www.mediahawkz.com/">MediahawkZ</a> </div> <div class="nav-search"> <div class="search"> <i class="material-icons">search</i> <input type="search" name="search" placeholder="Search"> </div> </div> </div> <ul class="nav-categories ul-base"> <li><a href="http://www.mediahawkz.com/topic/technology">Technology</a></li> <li><a href="http://www.mediahawkz.com/topic/science">Science</a></li> <li><a href="http://www.mediahawkz.com/topic/speak-up">Speak up</a></li> <li><a href="http://www.mediahawkz.com/topic/general">General</a></li> <li><a href="http://www.mediahawkz.com/topic/lifestyle">Lifestyle</a></li> <li><a href="http://www.mediahawkz.com/topic/world">World</a></li> <li><a href="http://www.mediahawkz.com/topic/business">Business</a></li> <li><a href="http://www.mediahawkz.com/topic/entertainment">Entertainment</a></li> <li><a href="http://www.mediahawkz.com/topic/sports">Sports</a></li> </ul> <ul class="social ul-base"> <li><a href="https://twitter.com/MediahawkZ" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/mediahawkz" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="https://plus.google.com/+MediahawkzIndia" class="google-plus" target="_blank"><i class="fa fa-google-plus"></i></a></li> <li><a href="http://www.mediahawkz.com/rss" class="rss" target="_blank"><i class="fa fa-rss"></i></a></li> </ul> <div class="copyright"> <span>© 2016 <a href="http://www.mediahawkz.com" class="link">MediahawkZ.com</a> Made in India</span> <span>Designed by <a href="https://twitter.com/rkchauhan01" target="_blank">Ravikumar Chauhan</a></span> </div> </nav><!-- @end nav --> <!-- header --> <header> <div class="header-inner clearfix"> <div class="nav-btn nav-slider"> <i class="material-icons">menu</i> </div> <div class="header-logo"> <a href="http://www.mediahawkz.com/"><img alt="logo" src="http://mediahawkz.com/assets/images/logos/logo-v2-1.png"></a> </div> <div class="header-categories"> <ul class="ul-base"> <li class="dropdown"> <a class="dropdown-toggle" href="#"><span>Categories</span> <i class="material-icons">keyboard_arrow_down</i></a> <ul class="dropdown-menu ul-base"> <li><a href="http://www.mediahawkz.com/topic/technology">Technology</a></li> <li><a href="http://www.mediahawkz.com/topic/science">Science</a></li> <li><a href="http://www.mediahawkz.com/topic/speak-up">Speak up</a></li> <li><a href="http://www.mediahawkz.com/topic/general">General</a></li> <li><a href="http://www.mediahawkz.com/topic/lifestyle">Lifestyle</a></li> <li><a href="http://www.mediahawkz.com/topic/world">World</a></li> <li><a href="http://www.mediahawkz.com/topic/business">Business</a></li> <li><a href="http://www.mediahawkz.com/topic/entertainment">Entertainment</a></li> <li><a href="http://www.mediahawkz.com/topic/sports">Sports</a></li> </ul> </li> </ul> </div> <div class="header-search"> <div class="search"> <i class="material-icons">search</i> <input type="search" name="search" placeholder="Search"> </div> </div> <div class="header-menu"> <ul class="ul-base"> <li><a href="https://twitter.com/MediahawkZ" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/mediahawkz" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="https://plus.google.com/+MediahawkzIndia" class="google-plus" target="_blank"><i class="fa fa-google-plus"></i></a></li> <li><a href="http://www.mediahawkz.com/rss" class="rss" target="_blank"><i class="fa fa-rss"></i></a></li> <li><a href="http://www.mediahawkz.com/admin">Login</a></li> </ul> </div> </div> </header><!-- @end header --> <!-- Main content --> <main role="main"></main><!-- @end main --> <!-- Footer --> <footer></footer><!-- @end footer --> <div class="overlay"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$('.dropdown-toggle').on('click', function(e) { e.stopPropagation(); e.preventDefault(); var self = $(this); if(self.is('.disabled, :disabled')) { return false; } self.parent().toggleClass("open"); }); $(document).on('click', function(e) { if($('.dropdown').hasClass('open')) { $('.dropdown').removeClass('open'); } }); $('.nav-btn.nav-slider').on('click', function() { $('.overlay').show(); $('nav').toggleClass("open"); }); $('.overlay').on('click', function() { if($('nav').hasClass('open')) { $('nav').removeClass('open'); } $(this).hide(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: