title: How to incorporate links inside a hamburger menu?
body: <p>I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu. </p>
  
  <p>I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu... </p>
  
  <p>I would like the following to be inside the hamburger menu:</p>
  
  <p>About
  Contact 
  Portfolio ,etc. </p>
  
  <p>Any suggestions on how to achieve this? </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>    * {
          text-decoration: none;
      }
      
      body {
          background-color: #f3f3f3;
      }
      
      header {
         background-color: #fff; 
         width: 100%;
         height: 100px;
         display: table-cell;
      }
      
      .header-logo img {
          height:100px;
          padding: 10px 0px 10px 10px;
          float: left;
      }
      
      header nav ul {
          display: block;
          margin: 0 auto;
          width: fit-content;
          padding-top: 30px;
      }
      
      header nav ul li {
          display: inline-block;
          padding: 0 5px;
      }
      
      header nav ul li a {
          font-family:'Sorts Mill Goudy', serif;
          font-size: 16px;
          color: #111;
          text-transform: uppercase;
      }
      
      .sub {
          display: none;
          background-color: rgb(70, 149, 223);
          margin-left: 5%;
          height: auto;
      }
      
      /* HAMBURGER MENU */
      .nav div {
          height: 4px;
          background-color: rgb(20, 15, 15);
          margin:  5px 0;
          border-radius: 25px;
          transition: 0.3s;
      }
      
      .nav {
          width: 30;
          display: block;
          float: right;
          margin: 1em 0 0 1em;
          padding-right: 10px;
      }
      
      .one {
          width: 30px;
      } 
      
      .two {
          width: 20px;
      } 
      
      .three {
          width: 25px;
      } 
      
      .nav:hover div{
          width: 30px;
      }
      
      
      
      
      ul li a:hover {
          color: rgb(255, 255, 255);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  &lt;div class="header-logo"&gt;
  &lt;a href="index.html"&gt; &lt;img src="img/Milestonehackers.jpg" alt="Milestonehackers logo"&gt;&lt;/a&gt;
  &lt;/div&gt;
              &lt;nav&gt;
                  &lt;ul&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
              &lt;ul&gt;
                &lt;a href="#" class="nav"&gt;
                      &lt;div class="one"&gt;&lt;/div&gt;
                      &lt;div class="two"&gt;&lt;/div&gt;
                      &lt;div class="three"&gt;&lt;/div&gt;        
               
                  &lt;li&gt;&lt;a href="podcasts.html"&gt;Podcast&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="newsletter.html"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      
                  &lt;div class="sub"&gt;
                  &lt;li&gt;&lt;a href="subscribe.html"&gt;Subscribe&lt;/a&gt;&lt;/li&gt;
                  &lt;/div&gt;
                  &lt;/a&gt;  
              &lt;/ul&gt; 
              &lt;/nav&gt;
          &lt;/header&gt;
      </code></pre>
  </div>
  </div>
  </p>