<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 ----------> <header class="slk-right"> <div class="container"> <div class="col-xs-6 col-md-4"> <div id="logo"> <a href="/">Silk Menu</a> </div> </div> <div class="col-xs-6 col-md-8"> <div class="slk-menu-items visible-xs visible-sm"> <a class="slk-menu-trigger" href="javascript:void(0)"> <span></span> <span></span> <span></span> </a> <a href="/"><i class="fa fa-phone"></i></a> <a href="/"><i class="fa fa-user"></i></a> <div class="clearfix"></div> </div> <nav class="slk-main-nav"> <ul class="nav nav-pills"> <li><a href="/">Home</a></li> <li><a href="/">About Us</a></li> <li><a href="/">Blog</a></li> <li><a href="/">Shop Now</a></li> <li><a href="/">Cat Videos</a></li> <li><a href="/">Contact</a></li> </ul> </nav> </div> </div> </header> <main> <h1>Created By: <a target="_blank" href="http://amitkashokkamble.com">Amit Ashok Kamble</a></h1> </main> <script> var _header = $("header"), _slkMmenu = $(".slk-main-nav"), _slkMenuTrigger = $(".slk-menu-trigger"), _slkOpenClass = "slk-open", _slkOpenLeft = $(".slk-left"); $(document).ready(function() { _slkMenuTrigger.toggle(function() { _header.addClass(_slkOpenClass) }, function() { _header.removeClass(_slkOpenClass) }) }); </script>

* { border-radius: 0px !important; font-family: 'Arvo', serif; outline: none !important; } html, body { background-color: rgba(46, 46, 51, 0.1); } header { padding: 10px 0; background: white; box-shadow: 0 -1px 1px 1px #2e2e33; background-color: white; } header #logo a { color: #2e2e33; display: block; font-size: 25px; padding: 2px 0; } h1 { position: fixed; right: 20px; bottom: 5px; font-size: 12px; color: #777783; } .slk-main-nav { transition: all 0.25s ease-in-out 0s; } .slk-main-nav ul li { border-bottom: 2px solid transparent; transition: all 0.25s ease-in-out 0s; } .slk-main-nav ul li:hover { border-bottom: 2px solid #2e2e33; } .slk-main-nav ul li a { background: none !important; color: #2e2e33; display: block; font-size: 16px; font-weight: bold; padding: 10px 20px; text-transform: uppercase; } .slk-menu-items a { display: block; float: right; font-size: 31px; height: 30px; line-height: 33px; margin-left: 15px; position: relative; width: 40px; color: #2e2e33 !important; } .slk-menu-items .slk-menu-trigger { transition: all 0.25s ease-in-out 0s; } .slk-menu-items .slk-menu-trigger span { width: 40px; height: 40px; background: #2e2e33; display: block; height: 4px; left: 0; margin: auto; pointer-events: none; position: absolute; right: 0; transition: all 0.25s ease-in-out 0s; } .slk-menu-items .slk-menu-trigger span:nth-child(1) { top: 0; } .slk-menu-items .slk-menu-trigger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .slk-menu-items .slk-menu-trigger span:nth-child(3) { bottom: 0px; } .slk-open .slk-menu-trigger { transform: rotate(90deg); } .slk-open .slk-menu-trigger span:nth-child(1) { transform: rotate(45deg) translateY(10px) translateX(10px); } .slk-open .slk-menu-trigger span:nth-child(2) { opacity: 0; } .slk-open .slk-menu-trigger span:nth-child(3) { transform: rotate(-45deg) translateY(-10px) translateX(10px); } .slk-open .slk-main-nav { transform: translate(0px, 0px) !important; } /* Portrait and Landscape */ @media only screen and (max-width: 768px) { .slk-main-nav { box-shadow: -5px 10px 20px 0 rgba(46, 46, 51, 0.2); height: 200%; margin-top: 21px; position: fixed; width: 250px; z-index: 9999; background-color: white; transition: all 0.25s ease-in-out 0s; } .slk-main-nav ul li { display: block; width: 100%; clear: both; } .slk-main-nav ul li a { width: 100%; padding-left: 25px; } .slk-right .slk-main-nav { transform: translate(250px, 0px); right: 0; } .slk-left .slk-main-nav { transform: translate(-250px, 0px); left: 0; } } /* Portrait and Landscape */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .slk-main-nav ul li a { padding: 10px 14px; font-size: 14px; } }