Creating a Responsive Navigation Bar Using HTML & CSS

Hello Friends, today you're going to learn to create a responsive navigation bar using HTML & CSS. This navigation bar includes seven menu options with submenus that are looking good. When you hover on the Learn & Services menu option it shows the submenu option with over effect. Also when you hover on the menus it shows cyan color on hover.

When you reduce the size by nearly 650px it shows responsive property that is comfortable when you use it on the mobile. It shows the menu bar option by clicking the menu bar it collapse into menus.

For Creating this navigation bar first you have to create two files i.e HTML & CSS

1. index.HTML

2. style.css

Source code for the HTML file is shown below, copy this code and paste it into the index.html file and save it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  
    <header>

<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Learn</a>
                  <div class="submenu">
                      <ul>
                          <li><a href="#">Themes</a></li>
                          <li><a href="#">Wordpress Plugins</a></li>
                          <li><a href="#">Advertising</a></li>
                          <li><a href="#">Tools</a></li>
                      </ul>

</div>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Services</a>
                    <div class="submenu">
                        <ul>
                            <li><a href="#">Create a Website</a></li>
                            <li><a href="#">Email Marketing</a></li>
                            <li><a href="#">Wordpress Hosting</a></li>
                            <li><a href="#">Free Cupons</a></li>
                        </ul>
  
                    </div>
                </li>
                <li><a href="#">Success Stories</a></li>
                <li><a href="#">Sign In</a></li>
                <li><a href="#" class="button">Create a Free Account</a></li>
            </ul>
        </nav>
    </header>

<span style="color: white; display: flex;justify-content: center;margin-top: 100px;font-size: 35px;">
     Responsive Navigation Bar With HTML And CSS<br>
</span>
<span style="color: white; display: flex;justify-content: center;margin-top: 100px;font-size: 35px;" class="button">By 8bit-code</span>
<style>
  
</style>
</body>
</html>

Source code for the CSS file is shown below, copy this code and paste it into the style.css file and save it.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
            font-family: 'Poppins',sans-serif;
        }
        body{
            background: #202030;
        }
        header{
            position: relative;
            background: #1b1b1b;
        }
        nav{
            text-align: center;
            background: #1b1b1b;
            position: relative;
        }
        nav ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        nav ul li{
            padding: 25px;
        }
        nav ul li a{
            color: rgb(202, 202, 202);
        }
        nav ul li a:hover{
            color: cyan;
        }
        .submenu{
            display: none;
        }
        nav ul li:hover .submenu{
            display: block;
            position: absolute;
            background: #1b1b1b;
            margin-top: 35px;
            margin-left: -50px;
        }
        nav ul li:hover .submenu ul{
            display: block;
            margin: 20px;
        }
        nav ul li:hover .submenu ul li{
            text-align: left;
            padding: 10px;
        }
        .button{
            background: #3f51b5;
            padding: 10px;
            border-radius: 5px;
        }
        .button:hover{
            color: #fff;
        }
        .menu-icon{
            color: #fff;
            font-size: 25px;
            cursor: pointer;
            line-height: 70px;
            width: 70px;
            text-align: center;
            display: none;
        }
         
        label{
            background: #161616;
            width: 100%;
        }
        input[type="checkbox"]{
            display: none;
        }
        
        @media screen and (max-width: 650px){
        
            .menu-icon{
                display: block;
            
            }
        
            #show-menu:checked ~ .menu-icon i::before{
                content: '\f00d';
            }
            nav ul{
                display: none;
                text-align:left;
            }
            nav ul li{
                padding: 15px;
            }
            nav ul li:hover .submenu{
                display: block;
                position: relative;
                background: #191919;
            }
            nav ul li:hover .submenu ul li{
                margin-left: 50px;
            }
         #show-menu:checked ~ nav ul{
             display: block;
         }
        }

If you have any problem regarding the above code you can watch the following tutorial for a better understanding.

we are done here, I hope you love this tutorial. Thank you for showing interest in this blog.

Navigation Bar

Creating a Responsive Navigation Bar Using HTML & CSS

Posted by 8bit-code

Post a Comment

0 Comments

Subscribe Us

Facebook

Categories

Footer Menu Widget

Contact form

Navigation Bar

Creating a Responsive Navigation Bar Using HTML & CSS

Posted by 8bit-code

You may like these posts

Post a Comment

0 Comments

Subscribe Us

Facebook

Categories

Footer Menu Widget

Contact form