Create Responsive Topnav With Hoverable Icon

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">
Step 2) Add to html : <h2>Create Responsive Topnav With Hoverable Icon</h2> <center> <div class="nav"> <div class="one"> <a href="#"> <i class="fa fa-home" aria-hidden="true"> Home</i> </a> </div> </div> <div class="nav"> <div class="two"> <a href="#"> <i class="fa fa-image" aria-hidden="true"> Image</i> </a> </div> </div> <div class="nav"> <div class="three"> <a href="#"> <i class="fa fa-users" aria-hidden="true"> Users</i> </a> </div> </div> <div class="nav"> <div class="four"> <a href="#"> <i class="fa fa-user-secret" aria-hidden="true"> Secret</i> </a> </div> </div> <div class="nav"> <div class="five"> <a href="#"> <i class="fa fa-phone" aria-hidden="true"> Contact</i> </a> </div> </div> <div class="nav"> <div class="six"> <a href="#"> <i class="fa fa-archive" aria-hidden="true"> Archive</i> </a> </div> </div> </center>
Step 3) Add to css : .nav{ width:105px; height:50px; display:inline-flex; border-radius:10px; box-shadow:0 10px 15px rgba(0,0,0,0.3); background:linear-gradient(#d2c447,#a98804,#d2c447); transition:.5s; } .nav:hover{ box-shadow:0 2px 5px rgba(0,0,0,0.3); } .one,.two,.three,.four,.five,.six{ width:95px; height:40px; background:green; margin-top:5px; margin-left:5px; background:linear-gradient(#a98804,#c6af31,#a98804); border-radius:10px; } .one a, .two a, .three a ,.four a, .five a, .six a{ line-height:calc(50px - 12px); font-size:19px; color:black; transition:.5s; } .one a:hover{ color:#f73a36; } .two a:hover{ color:#8612f6; } .three a:hover{ color:#dc22df; } .four a:hover{ color:blue; } .five a:hover{ color:#8136e3; } .six a:hover{ color:green; }

Thank you sir

Congratulations to you on visiting our page.

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