Responsive Navigation Bar Using HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Responsive Navigation Bar Using HTML & CSS. Earlier I have shared many blogs on How to Create a Colorful Glowing Shadow Effect on Hover using HTML & CSS. And, now I'm going to create a Responsive Navigation Bar Using HTML & CSS.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program ( Responsive Navigation Bar).

Video Tutorial of Responsive Navigation Bar

As you have seen the pure Responsive Navigation Bar Using HTML & CSS in the video. This Responsive Navigation Bar Using HTML & CSS is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Responsive Navigation Bar Using HTML & CSS.

If you like this program ( Responsive Navigation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use these Responsive Navigation Bar on your websites, projects, and HTML pages.

Responsive Navigation Bar[Source Codes]

To create this program (Responsive Navigation Bar Using HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!--Created By | PakiCoder-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nav Bar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul>
        <li><a class="active" href="#s">Home</a></li>
        <li><a  href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
</html>
</body>
</html>

CSS FILE:

body{
    background-image: url(banner.jpg);
    background-repeat: no-repeat;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 20px;
}
li a:hover:not(.active){
 
   background-color: #07ff13;
}
.active{
  
   background-color: #07ff13;
}
@media screen and (max-width:600px){
    li{
        float:none;
    }
}

PakiCoder

Video Tutorial of Responsive Navigation Bar

You might like this:

Responsive Navigation Bar[Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Formulir Kontak