Step by Step procedure to create Responsive Navigation bar with Icons using HTML and CSS.
Hello friends how are you , Today in this post "Responsive Navigation bar with icon using HTML and CSS" we will learn how to create Responsive Navigation bar with icons using very simple lines of HTML and CSS code. If you want to create website then you can customize it and you can use this navigation bar into your website. If you wan to create something interesting using simple HTML and CSS then this post is for you.
Now i am going to explain step by step.
Step 1:Create an HTML file: Now open notepad and type the below code or you can copy this code for your personal use
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ margin: 0; background-color: white; font-family: Arial, Helvetica, sans-serif; } .myNav{ overflow: hidden; background-color: rgb(5,37,51); text-align: center; } .myNav a{ float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 15px; text-decoration: none; font-size: 16px; } .myNav a:hover{ background-color: rgb(13, 99, 105); color: black; } .myNav a.active{ background-color: #04577e; color: white; } .myNav .icon{ display: none; } @media screen and (max-width: 500px){ .myNav a:not(:first-child){display: none;} .myNav a.icon{ float: right; display: block; } } @media screen and (max-width: 500px){ .myNav.responsive{position: relative;} .myNav.responsive .icon{ position: absolute; right: 0; top: 0; } .myNav.responsive a{ float: none; display: block; text-align: left; } } i{ padding: 0 2px; color: orangered; } </style> </head> <body> <div class="myNav" id="myTopNav"> <a href="#" class="active"><i class="fa fa-home"></i>Home</a> <a href="#"><i class="fa fa-cog"></i>Service</a> <a href="#"><i class="fa fa-user"></i>Registration</a> <a href="#"><i class="fa fa-lock"></i>Login</a> <a href="#"><i class="fa fa-user"></i>About</a> <a href="#"><i class="fa fa-address-book"></i>Contact</a> <a href="#"><i class="fa fa-image"></i>Gallery</a> <a href="javascript:void(0);" class="icon" onclick="myFun()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFun() { var x=document.getElementById("myTopNav"); if(x.className=="myNav") { x.className+=" responsive"; } else{ x.className="myNav"; } } </script> </body> </html>
0 Comments