How to create Responsive Navigation bar using HTML and CSS only

Hello friends how are you , Today in this post "Responsive Navigation bar using HTML and CSS only" we will learn how to create Responsive Navigation bar 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: black;
            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: orangered;
            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: center;
            }
            
        }

    </style>
</head>
<body>
    <div class="myNav" id="myTopNav">
      <a href="#" class="active">Home</a>
      <a href="#">Service</a>
      <a href="#">Registration</a>
      <a href="#">Login</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">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>

Now save this file with name responsiveHtml.html inside your system directory or on Desktop. Note-Don't forget to type .html after the file name because .html is the extension for HTML file.

Step 2:Run HTML file: Now its time to run HTML file so right click on responsiveHtml.html file and then select open with and then select chrome browser or you can select any browser for output.

Responsive Navigation bar using HTML and CSS only

You will get output screen like below screenshot.

Now when you will resize the browser window you will get output screen like below.

Now click on three line icon which is on top right of screen and you will get menubar like below screenshot.

I hope now you can create "Responsive Navigation bar using HTML and CSS only". If you have any doubt regarding this post or you want something more in this post then let me know by comment below i will work on it definitely.

Also Visit: Navigation bar with icons

Turn Light on Using HTML & CSS

Neon Light effect in HTML & CSS

Music Player in Python

Quiz App in Python with source code

Create Audiobook in Python | Only 6 line code

Send WhatsApp message using Python | only 2 line code

Request:-If you found this post helpful then let me know by your comment and share it with your friend.

If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all.

If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other.

If you like my post then share it with your friends. Thanks😊Happy Coding.