CODEWITHSUNDEEP
htmlcss
Sachihiro
Sachihiro

Reputation: 1783

How to make a responsive navigation bar with menu icon

I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling. 

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #a2d4c3;
  margin: 3px 50px 3px 50px;
  border: 1px solid black;
  border-radius: 5px;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

@media screen and (max-width: 760px) {
  .topnav a {
    float: none;
    display: block;
  }
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.hidden:hover a {
  background-color: #dab756;
  display: block;
}

.hidden:hover ul a:hover {
  color: #fff;
}

.hidden li ul {
  display: none;
}

.hidden li {
  display: block;
  float: none;
}

.hidden ul li a {
  width: auto;
  min-width: auto;
  display: block;
}

.hidden .hidden:hover li a {
  display: block;
}
@media screen and (max-width: 750px) {
  .hidden ul {
    position: static;
    display: none;
  }

  .hidden li a {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link </head>
  <body>
    <header id="header">
      <div class="topnav">
        <ul class="hidden">
          <li><a href="#">Menu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </div>
    </header>
  </body>
</html>

Upvotes: 1

Views: 1495

Answers (2)

Manan M.
Manan M.

Reputation: 1394

Now I think that this snippet is the same as you want...

body {
    font-family: sans-serif;
  }
  * {
    box-sizing: border-box;
  }
  header {
    background: #181818;
    height: 200px;
    padding-top: 40px;
  }
  .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 20px;
    position: relative;
  }
  .logo {
    text-decoration: none;
    color: #777;
    font-weight: 800;
    font-size: 30px;
    line-height: 40px;
  }
  h1 {
    text-align: center;
    width: 100%;
    margin-top: 120px;
    color: #eee;
    font-weight: 800;
    font-size: 40px;
  }
  nav > ul {
    float: left;
  }
  nav > ul > li {
    text-align: center;
    line-height: 40px;
    margin-left: 70px;
  }
  nav > ul li ul li {
    width: 100%;
    text-align: left;
  }
  nav ul li:hover {
    cursor: pointer;
    position: relative;
  }
  nav ul li:hover > ul {
    display: block;
  }
  nav ul li:hover > a {
    color: #777;
  }
  nav > ul > li > a {
    cursor: pointer;
    display: block;
    outline: none;
    width: 100%;
    text-decoration: none;
  }
  nav > ul > li {
    float: left;
  }
  nav a {
    color: white;
  }
  nav > ul li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 2000;
  }
  nav > ul li ul li > a {
    text-decoration: none;
  }
  [type="checkbox"],
  label {
    display: none;
  }
  @media screen and (max-width: 750px) {
    nav ul {
      display: none;
    }
    label {
      display: block;
      background: #222;
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    label:after {
      content: '';
      display: block;
      width: 30px;
      height: 5px;
      background: #777;
      margin: 7px 5px;
      box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
    }
    [type="checkbox"]:checked ~ ul {
      display: block;
      z-index: 9999;
      position: absolute;
      right: 20px;
      left: 20px;
    }
    nav a {
      color: #777;
    }
    nav ul li {
      display: block;
      float: none;
      width: 100%;
      text-align: left;
      background: #222;
      text-indent: 20px;
    }
    nav > ul > li {
      margin-left: 0px;
    }
    nav > ul li ul li {
      display: block;
      float: none;
    }
    nav > ul li ul {
      display: block;
      position: relative;
      width: 100%;
      z-index: 9999;
      float: none;
    }
    h1 {
      font-size: 26px;
    }
  }
<header>
    <div class="inner">
        <nav>
            <input type="checkbox" id="nav" /><label for="nav"></label>
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </div>
</header>

Upvotes: 1

Manan M.
Manan M.

Reputation: 1394

you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
</a>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
           x.className = "topnav";
        }
      }
   </script>

or refere this example

Upvotes: 1

Related Questions