Create a Responsive Navbar using HTML and CSS Posted by Yahya Benlachheb on June 16, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://use.fontawesome.com/d1341f9b7a.js"></script> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> <title>Navbar</title> </head> <body> <header> <h1> DarkCode WebSite</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Images</a></li> <li><a href="#">Contact</a></li> </ul> <div class="hide"> <i class="fa fa-bars" aria-hidden="true"></i> Menu </div> </nav> <script type="text/javascript"> $('.hide').on('click',function(){ $('nav ul').toggleClass('show'); }); </script> </body> </html> CSS CODE body{ margin: 0; padding: 0; font-family: 'Century Gothic',sans-serif; } header{ width: 100%; text-align: center; background: #607d8b; padding: 40px 0; color: white; } nav ul{ margin: 0; padding: 0; overflow: hidden; color: white; background-color: #5a6e77; text-align: center; transition: max-height 0.4s; } nav ul li{ display: inline-block; padding: 20px; transition: all ease-in-out 250ms; cursor: pointer; } nav ul li a{ text-decoration: none; color: white; } nav ul li:hover{ background: #607d8b; } .hide{ background: #607d8b; padding: 16px; color: white; cursor: pointer; font-size: 22px; display: none; } @media screen and (max-width:680px) { nav ul li{ width: 100%; text-align: left; padding: 15px; } .show{ max-height: 20em; } .hide{ display: block; } nav ul{ max-height: 0; } } Comments UnknownNovember 13, 2017 at 6:04 PMThanks and Good Job ^_^ :D :)ReplyDeleteRepliesReplyradhaMarch 13, 2018 at 9:24 AMNice post .Keep sharing UI online training ReplyDeleteRepliesReplyMohamedApril 15, 2018 at 8:45 PMgod bless youReplyDeleteRepliesReplyAri .SFebruary 26, 2019 at 7:14 AMgoodReplyDeleteRepliesReplyAnonymousMay 16, 2020 at 10:13 AMAwesome NavbarReplyDeleteRepliesReplyAnonymousMay 16, 2020 at 10:14 AMResponsive Dropdown Menu Bar in HTML & CSS onlyReplyDeleteRepliesReplyEasyTutsMay 31, 2020 at 2:48 PMI love this blog ...Thanks for sharing this wonderful information.Here I have some codes of Responsive Navigation Bar..These code links may help you:Minimal Drop-down Menu Bar with Submenu using HTML & CSSMinimal Navigation Menu Bar using HTML CSS & JavaScriptSide Menu Bar with sub-menu using HTML CSS & JavascriptResponsive Navigation Menu Bar using CSS FlexboxResponsive Sidebar Menu using HTML & CSSResponsive Drop-down Menu Bar using HTML & CSSSide Navigation Menu Bar in HTML CSSReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment
Thanks and Good Job ^_^ :D :)
ReplyDeleteNice post .Keep sharing UI online training
ReplyDeletegod bless you
ReplyDeletegood
ReplyDeleteAwesome Navbar
ReplyDeleteResponsive Dropdown Menu Bar in HTML & CSS only
ReplyDeleteI love this blog ...Thanks for sharing this wonderful information.
ReplyDeleteHere I have some codes of Responsive Navigation Bar..These code links may help you:
Minimal Drop-down Menu Bar with Submenu using HTML & CSS
Minimal Navigation Menu Bar using HTML CSS & JavaScript
Side Menu Bar with sub-menu using HTML CSS & Javascript
Responsive Navigation Menu Bar using CSS Flexbox
Responsive Sidebar Menu using HTML & CSS
Responsive Drop-down Menu Bar using HTML & CSS
Side Navigation Menu Bar in HTML CSS