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 Navbar DarkCode WebSite Home About Blog Shop Images Contact Menu 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 PMThis comment has been removed by the author.ReplyDeleteRepliesReplyAdd 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
ReplyDeleteThis comment has been removed by the author.
ReplyDelete