title: How to make a responsive navigation bar with menu icon
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link &lt;/head&gt;
    &lt;body&gt;
      &lt;header id="header"&gt;
        &lt;div class="topnav"&gt;
          &lt;ul class="hidden"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/header&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>