"responsive with pure "
Pure CSS 0.6.2 Snippet by testing223

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title> hai chumma testing</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <script> $(function(){ $(".btn-bars").click(function(){ $(".navbar").toggleClass("hideNav","slow"); }); $(".avator").click(function(){ $(".navbar-right").toggleClass("hidden","slow"); }); }); </script> <nav class="nav-bar"> <div class="brand"> Branding <a href="javascript:void(0)" class="btn-bars"> <i class="fa fa-bars"></i></a></div> <div class="header"> <div class="header-right"> <input type="search"> <div class="blog-user"> <a href="#" class="avator"><img src="https://solutiontech.in/img/logo.png"></a> <ul class="navbar-right hidden"> <li class="active"><a href="#"><i class="fa fa-user"></i><span>Home </span></a></li> <li><a href="#"><i class="fa fa-map"></i><span>About</span> </a></li> <li><a href="#"><i class="fa fa-sliders"></i><span>Service </span></a></li> <li><a href="#"><i class="fa fa-phone"></i><span>Contact </span></a></li> </ul> </div> </div> </div> <ul class="navbar hideNav"> <li><a href="#"><i class="fa fa-user"></i><span>Home </span></a></li> <li><a href="#"><i class="fa fa-map"></i><span>About</span> </a></li> <li><a href="#"><i class="fa fa-sliders"></i><span>Service </span></a></li> <li><a href="#"><i class="fa fa-phone"></i><span>Contact </span></a></li> </ul> </nav> </body> </html>
* { margin:0px; padding:0px; } ul.navbar { background:#4a7746; list-style-type: none; margin: 0px; padding: 0px; } .navbar > li > a i { margin-right: 10px; width: 40px; padding: 10px; box-sizing: border-box; } .navbar > li > a:hover,.navbar > li.active > a { background: #335230; } .navbar > li > a { display: block; color: #fff; text-decoration: none; font-size: 18px; padding: 10px; } .brand { background: #3e523d; color:#fff; float: left; width: 100%; box-sizing: border-box; padding:18px 10px; font-size: 25px; } .navbar { width:100% ; } .brand a:hover { background: #444; } .brand a { padding: 5px 10px; float: right; box-sizing: border-box; color: #fff; background: #4a7746; } .hideNav { visibility: hidden; } @media screen and (min-width: 768px) { ul.navbar { height: 100vh; width: 80px; } ul.navbar li span { visibility: hidden; } ul.navbar li a i { font-size: 30px; padding-top: 22px; vertical-align: middle; } ul.navbar li { text-align: center; } .btn-bars { visibility: visible; } } @media screen and (min-width: 768px) { .brand { padding-right: 10px; background: #3e523d; color:#fff; width: 16.666%; } ul.navbar { width: 16.666%; } ul.navbar.hideNav { width: 100px; visibility: visible; } ul.navbar.hideNav { height: 100vh; width: 80px; } ul.navbar.hideNav li span { visibility: hidden; } ul.navbar.hideNav li a i { font-size: 30px; padding-top: 22px; vertical-align: middle; } ul.navbar.hideNav li { text-align: center; } ul.navbar.hideNav li span { text-align: left; visibility: visible; } ul.navbar li span { text-align: left; visibility: visible; } ul.navbar li a i { font-size: 18px; padding-top: 0px; vertical-align: baseline; } ul.navbar li a { padding-top: 22px; font-size: 18px; } ul.navbar li { text-align: left; } } .header { height: 70.8px; width: 100%; background: #163c12; } .header-right ul { list-style-type: none; margin: 0px; padding:0px; } .header-right { width: 83.3333%; float: left; } .header-right input { margin: 15px; padding: 10px; width: 400px; border-radius:5px; border:0px; outline: none; } .header-right ul.navbar-right { position: absolute; right: 10px; top: 60px; margin-top: 20px; box-shadow: 0px 0px 3px 1px #ddd; width:200px; } .header-right ul.navbar-right li.active, .header-right ul.navbar-right li:hover { background: #f4f4f4; } .header-right ul.navbar-right li a i { box-sizing: border-box; padding: 10px; } .header-right ul.navbar-right li a { text-decoration: none; padding: 10px 10px; display: block; color: #333; } .blog-user { float: right; } .blog-user a.avator img { float: right; } .avator { height: 55px; width: 55px; margin-top: 5px; margin-right: 15px; float: right; } .avator img { border-radius: 100px; height: 90%; border:4px solid #fff; } .header-right ul.navbar-right li { z-index: 9999; border-bottom: 1px solid #e1e1e1; background: #fff; } .hidden { visibility: hidden; } .header-right { width: 100%; background: #333; } .header-right ul.navbar-right { position: absolute; right: 0px; margin-top: 80px; width: 100%; box-shadow: 0px 0px 3px 1px #ddd; } .header-right input { margin: 15px; padding: 10px; width: 80%; border-radius:5px; border:0px; outline: none; }

Related: See More

Vue Argon Design System

Questions / Comments: