DEV Community

Cover image for Responsive Navbar Using HTML CSS
Ganesh Patil
Ganesh Patil

Posted on

Responsive Navbar Using HTML CSS

Navbar component is important part of website for client because its hold all information about your project or brand like about your brand contact and other details and navbar always sounds good when its responsive so, let's start with HTML code .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="./assets/Group 11.png" sizes="32x32" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/814966721c.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>Personal Portfolio</title>
</head>
<body>
    <section id="home">
        <header>
            <nav class="nav">
              <a href="/" class="logo">Portfolio</a>

              <div class="hamburger">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>

              <div class="nav__link hide">
                <a href="#">home</a>
                <a href="#">about</a>
                <a href="#">Skills</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
              </div>
            </nav>
          </header>

        <div class="content">
            Hey there,
            I am Ganesh and Congratulations
             you successfully
             build navbar component.

        </div>
    </section>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now we done with HTML part now add CSS with our creativity

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pattaya&family=Poppins:wght@200;400;600&family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #F8F8FF;
}

a {
    text-decoration: none;
    color: rgb(45, 182, 175);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
  }

  .logo {
    font-size: 32px;
    color: rgb(5, 5, 116);
    padding-left: 20px;
  }

  .hamburger {
    padding-right: 20px;
    cursor: pointer;
  }

  .hamburger .line {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 10px;
    background-color: black;
  }

  .nav__link {
    position: fixed;
    width: 94%;
    top: 5rem;
    left: 18px;
    /* background-color: lightblue; */
  }

  .nav__link a {
    display: block;
    text-align: center;
    padding: 10px 0;
  }

  .nav__link a:hover {
    border-bottom: 3px solid rgb(36, 145, 196);
    border-radius: 7px;
    transition: all 0.2s ease;
  }

  .hide {
    display: none;
  }
  .content{
    display: flex;
    justify-content: center;
    text-align: justify;
    align-items: center;
    margin-top: 20%;
    color: rgb(17, 19, 19);
    font-weight: 700;
    font-size: 20px;

    font-family: poppins,sans-serif;
  }
  @media screen and (min-width: 600px) {
    .nav__link {
      display: block;
      position: static;
      width: auto;
      margin-right: 20px;
      background: none;


    }

    .nav__link a {
      display: inline-block;
      padding: 15px 20px;


    }

    .hamburger {
      display: none;
    }
    .content{
      display: block;
      text-align: center;
      margin-left: 15px;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Output for above code:
Image description

check this code on GitHub
follow me for more content like this and share your suggestions in comment section...!!

Let's conn with me on twitter

Top comments (6)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
devgancode profile image
Ganesh Patil

what actually problem you get its work this side

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
devgancode profile image
Ganesh Patil

Hey frank check this reository it will definately help you for creating responsive navbar github.com/dev-ggaurav/responsive-...

Thread Thread
 
frankwisniewski profile image
Frank Wisniewski

I know how to create a responsive NavBar. Just wanted to point out that the code shown here doesn't work that way.....

Thread Thread
 
devgancode profile image
Ganesh Patil

ok thankyou for checking the code looking forward to fix this...