Responsive Navigation Bar

Introduction:

Navigation bars are the buttons and links that help people find their way around your website. In today's world, where people use all sorts of devices to browse, it's important for these bars to work well on everything, from big computers to tiny phones. This guide will show you how to build a navigation bar that works great on anything, using just basic website building tools like HTML and CSS.

Things you will learn:

By following this tutorial, you'll gain insights into the following key aspects:

Setting up a basic HTML structure for the navigation bar.
Styling the navigation bar using CSS, including responsiveness.
Incorporating Font Awesome for a visually appealing menu icon.
Implementing a smooth transition effect for an enhanced user experience.

Video Tutorial:

To complement this written guide, we've prepared a video tutorial that visually demonstrates each step of the process. Watch the tutorial to see the code in action and gain a deeper understanding of the concepts covered.

File Structure:

In that, You can create the one Folder that is "responsive-navigation-bar" in that folder, create 2 different file that is:

1. index.html
2. style.css

after creating 2 file firstly call the "style.css" into "index.html"
like "<link rel="stylesheet" href="css/style.css" />" then after start the working on that project. In give below, Our team providng souce code that can you use for you personal projects.

HTML

<!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>Responsive Navigation Bar</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
          <link rel="stylesheet" href="style.css">
      </head>
      <body>
          <nav>
              <input type="checkbox" name="" id="check">
              <label for="check" class="checkbtn">
                  <i class="fa fa-bars" aria-hidden="true"></i>
              </label>
              <label class="logo"><a href="#">LOGO</a></label>
              <ul>
                  <li><a href="#" class="active">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Service</a></li>
                  <li><a href="#">Portflio</a></li>
              </ul>
          </nav>
          <div class="content">
              <h1>Responsive Navigation Bar</h1>
          </div>
      </body>
      </html>

CSS

*{
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }
        body{
            font-family: 'Poppins', sans-serif;
        }
        nav{
            background: #0082e6;
            height: 80px;
            width: 100%;
        }
        label.logo a{
            color: #fff;
            font-size: 35px;
            line-height: 80px;
            padding: 0 100px;
            font-weight: bold;
        }
        label.logo a:hover{
            background: none;
        }
        nav ul{
            float: right;
            margin-right: 20px;
        }
        nav ul li{
            display: inline-block;
            line-height: 80px;
            margin: 0 5px;
        }
        nav ul li a{
            color: #fff;
            font-size: 17px;
            padding: 7px 13px;
            border-radius: 3px;
            text-transform: uppercase;
        }
        a.active, a:hover{
            background: #1b9bff;
            transition: .5s;
        }
        .checkbtn{
            font-size: 30px;
            color: #fff;
            float: right;
            line-height: 80px;
            margin-left: 40px;
            cursor: pointer;
            display: none;
        }
        #check{
            display: none;
        }
        .content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: -1;
            width: 100%;
            padding: 0 30px;
            color: #1b1b1b;
        }
        .content h1{
            margin: 10px;
            font-size: 37px;
            font-weight: 900;
        }
        @media (max-width: 952px){
            label.logo{
                font-size: 30px;
                padding-left: 50px;
            }
            nav ul li a{
                font-size: 16px;
            }
        }
        @media (max-width: 768px){
            .checkbtn{display: block;}
            ul{
                position: fixed;
                width: 40%;
                height: 100vh;
                background: #000;
                color: #fff;
                top: 80px;
                left: -50%;
                text-align: center;
                transition: all .5s;
            }
            nav ul li{
                display: block;
                margin: 50px 0;
                line-height: 30px;
            }
            nav ul li a{
                font-size: 20px;
            }
            a:hover, a.active{
                background: none;
                color: #0082e6;
            }
            #check:checked~ul{
                left: 0;
            }
        }

Conclusion:

In conclusion, creating a responsive navigation bar is an essential skill for web developers. It not only improves user experience but also contributes to the overall aesthetics of a website.

Search This Blog

SuperCodingBits

Strategies for Writing an Effective Developer Resume