title: Drop down menu positioning
body: <p>so I'm having this issue. Here is the jsfiddle.</p>
  
  <p><a href="https://jsfiddle.net/g5yo9jts/" rel="nofollow">https://jsfiddle.net/g5yo9jts/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="header"&gt;  
  &lt;div class="menuIcon"&gt;   
    &lt;a id="nav-toggle" href="#menuExpand"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
       &lt;div class="box"&gt;&lt;h3&gt;Home&lt;/h3&gt;&lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="menu"&gt;    
    &lt;ul&gt;      
      &lt;li&gt;&lt;a href="#"&gt;Menu Option 1&lt;/a&gt;&lt;/li&gt;      
      &lt;li&gt;&lt;a href="#"&gt;Menu Option 2&lt;/a&gt;&lt;/li&gt;      
      &lt;li&gt;&lt;a href="#"&gt;Menu Option 3&lt;/a&gt;&lt;/li&gt;      
      &lt;li&gt;&lt;a href="#"&gt;Menu Option 4&lt;/a&gt;&lt;/li&gt;    
    &lt;/ul&gt;  
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  * {
  -webkit-font-smoothing:antialiased;
  padding: 0;
  margin: 0;
   }
  
  #nav-toggle span {
  margin-left: 15px; 
  float: left;
  
  }
  
   #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
   cursor: pointer;
   border-radius: 1px;
   height: 3px;
   width: 25px;
   background: white;
   position: absolute;
   display: block;
   content: '';
   }
   #nav-toggle span:before {
   top: -6px;
   }
   #nav-toggle span:after {
   bottom: -6px; 
   }
  
  
  #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
  }
  #nav-toggle.active span {
  background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
   top: 0;
   }
   #nav-toggle.active span:before {
   transform: rotate(45deg);
   }
   #nav-toggle.active span:after {
   transform: rotate(-45deg);
   }
  
   h3 {
   font-size: 1em;
   color: white;
   float: right;
   margin-right: 15px;
   margin-bottom: 25px;
   font-family: "alternate-gothic-no-3-d";
   font-weight: 800;
  
    }
  
  
  
   .header .menu ul {
    padding: 0;
   margin: 0;
   }
  
   .header .menu ul li {
    display: inline-block;
    list-style: none;
    padding: 0 0 0 5px;
    margin: 0;
    }
    .header .menuIcon {
    height: 50px;
    display: none;
    background: #000;
    width: 100%;
  
   }
  
   .header .menuIcon a {
    width: 100%;
    display: inline-block;
    color: #fff;
   }
  
   .header .menuIcon a img {
    vertical-align: middle;
   }
  
  
  
   @media only screen and (min-width: 400px) {
   .menu {
   display: none;
   }
  
   }
  
   @media only screen and (max-width: 767px) {
   .header .menu {
   max-height: 0;
   overflow: hidden;
   float: none;
   text-align: center;
   width: 100%;
   -webkit-transition: max-height 0.5s;
   -moz-transition: max-height 0.5s;
   transition: max-height 0.5s;
   }
  
   .header .menu.menuOpen {
   max-height: 1000px;
   -webkit-transition: max-height 0.5s;
   -moz-transition: max-height 0.5s;
   transition: max-height 0.5s;
    }
   .header .menu ul li {
    display: block;
    width: 100%;
    background: #000;
    border-top: 1px solid #4d4d4d;
   }
   .header .menu ul li:hover {
    background: #999;
    }
  .header .menu ul li a {
  color: #fff;
  text-shadow: #848484 0px 1px 2px;
  padding: 10px;
  width: 100%;
  }
  .header .menuIcon {
   display: inline-block;
  }
   }
  
  
   $(function() {    $("a[href=#menuExpand]").click(function(e) {                   
  $(".menu").toggleClass("menuOpen");        e.preventDefault();    });});
  
  
  document.querySelector( "#nav-toggle" ).addEventListener( "click",      
    function(){         
  
    this.classList.toggle( "active" );
   });
  
  
   $(".header").click(function() {
   $('.menu').show();
  
   });
  </code></pre>
  
  <p>The main issue is my hamburger icon and text font aren't lining up. As you can see the hamburger is centered vertically and the text is on bottom right. I've tried everything from margining the text, to adding a box div to the text to move it. Floating, absolute positioning is not working.</p>
  
  <p>I'd also like to have the hamburger icon on the right, and the text for my page on the left but I was having issues with the centering that I hadn't got that far. If anybody could help out that would be awesome.</p>
  
  <p>Thanks so much.</p>
  
  <p>NB: Resize the fiddle 'Result' view to something closer to a mobile/tablet device display resolution to view the menu. Maximum width 767px.</p>