Post
Ask Question

Responsive Navigation Bar Using JavaScript and CSS

Start with Html and add UI compatibility so that it will render according to the browsers.

<html lang="en">
     
   <head>          
      <meta charset="UTF-8" />                 
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />          
      <link rel="stylesheet" href="styles.css" />          
      <title>Navigation bar</title>

Javascript Section: This section is used to add a toggle effect navigation button.

<script type="text/javascript">
  function toggleMobileMenu(menu) {
    menu.classList.toggle('open');
  }
</script>

Now will add style here, which is our CSS.

<style type="text/css">
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    background-color: White;
    color: white;
    font-family: "Poppins", sans-serif;
  }

  header a {
    text-decoration: none;
  }

  header {
    padding: 0 3px;
    background-color: seagreen;
    height: 50px;
    display: flex;
    justify-content: space-between;
  }

  #cssimgrd {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  #brand {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  #brand a {
    color: #09c372;
  }

  ul {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  ul a {
    color: white;
  }

  ul li {
    padding: 5px;
    margin-left: 10px;
  }

  ul li:hover {
    transform: scale(1.1);
    transition: 0.3s;
  }

  #login,
  #signup {
    border-radius: 5px;
    padding: 5px 8px;
  }

  #login {
    border: 1px solid #498afb;
  }

  #signup {
    border: 1px solid #ff3860;
  }

  #signup a {
    color: #ff3860;
  }

  #login a {
    color: #498afb;
  }

  #hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
  }

  #hamburger-icon div {
    width: 35px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
  }

  .open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
  }

  .open .bar2 {
    opacity: 0;
  }

  .open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
  }

  .open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;
  }

  .mobile-menu li {
    margin-bottom: 10px;
  }

  @media only screen and (max-width: 600px) {
    header nav {
      display: none;
    }

    #hamburger-icon {
      display: block;
    }
  }
</style>undefined</head>

Actual HTML code start here, where we will put our Menu Items.

<body>
  <header>
    <div id="brand" class="bar1">
      <img src="Here you can reference the image"></img>
    </div>
    <nav>
      <ul>
        <li>
          <a href="/home">Home</a>
        </li>
        <li>
          <a href="/products">Products</a>
        </li>
        <li>
          <a href="/about">About</a>
        </li>
        <li id="login">
          <a href="/login">Login</a>
        </li>
        <li id="signup">
          <a href="/signup">Signup</a>
        </li>
      </ul>
    </nav>
    <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <ul class="mobile-menu">
        <li>
          <a href="/home">Home</a>
        </li>
        <li>
          <a href="/products">Products</a>
        </li>
        <li>
          <a href="/about">About</a>
        </li>
        <li id="login">
          <a href="/login">Login</a>
        </li>
        <li id="signup">
          <a href="/signup">Signup</a>
        </li>
      </ul>
    </div>
  </header>
  <script src="index.js"></script>
</body>undefined</html>

Conclusion

in this article, we also used the online Google fonts, and we have a reference in the head section. This will work across the browsers and works well. please feel free to write back related to issues and queries you faced while using this. happy to help you out. thanks, happy coding.