Create Responsive Header Navbar With HTML And CSS

Its features:

  • It is completely responsive.

  • When you compress it then the menu displays vertically.

  • You can add a link to the name of each menu.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/ 4.7.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=BioRhyme' rel='stylesheet'>
Step 2) Add to html :
<h2>Create Responsive Header Navbar With HTML And CSS</h2> <div class="header"> <a href="#default" class="logo"> FOOD-R </a> <div class="header-right"> <a href="#home">Home</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#about">Services</a> <a class="active" href="#about">Order Now</a> </div> </div>
Step 3) Add to css :
.header { overflow: hidden; max-width:750px; min-height:auto; padding: 20px 10px; background-image: linear-gradient(#c00404, #f7012f, #c00404); transform: skew(-30deg); margin:auto; border-radius:10px; } .header a { float: left; color: white; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; transform: skew(30deg); } .header a.logo { font-size:40px; font-weight: 600; font-family: 'BioRhyme'; } .header a:hover { background-color:white; color: black; } .header a.active { background-image: linear-gradient(#f74d00, #f7741e, #f74d00); color: white; } .header-right { float: right; } @media screen and (max-width: 500px) { .header a { float: none; display: block; text-align: left; } .header-right { float: none; } }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.