title: Responsive Dropdown Menu Navigation Position Next To Logo CSS & HTML
body: <p>I have a problem and its been killing me, been following various tutorials to create my navigation bar for my website but cant seem to get it right. The problem i have is that i cant position my navigation to be next to my logo when the screen is large. Everytime i shrink it down then click my menu button it appears in the same position as the last screen so im unable to see it.</p>
  
  <p>Any help from experiance users will be much appreciated, the CSS &amp; HTML i have is below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Strip the ul of padding and list styling*/
  ul {
      list-style-type:none;
      margin:0;
      padding:0;
      position: fixed;
  
  }
  
  /*Create a horizontal list with spacing*/
  li {
      display:inline-block;
      float: left;
      margin-right: 1px;
  }
  
  /*Style for menu links*/
  li a {
      display:block;
      min-width:140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      background: #2f3036;
      text-decoration: none;
  }
  
  /*Hover state for top level links*/
  li:hover a {
      background: #19c589;
  }
  
  /*Style for dropdown links*/
  li:hover ul a {
      background: #f3f3f3;
      color: #2f3036;
      height: 40px;
      line-height: 40px;
  }
  
  /*Hover state for dropdown links*/
  li:hover ul a:hover {
      background: #19c589;
      color: #fff;
  }
  
  /*Hide dropdown links until they are needed*/
  li ul {
      display: none;
  }
  
  /*Make dropdown links vertical*/
  li ul li {
      display: block;
      float: none;
  }
  
  /*Prevent text wrapping*/
  li ul li a {
      width: auto;
      min-width: 100px;
      padding: 0 20px;
  }
  
  /*Display the dropdown on hover*/
  ul li a:hover + .hidden, .hidden:hover {
      display: block;
  }
  
  /*Style 'show menu' label button and hide it by default*/
  .show-menu {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-decoration: none;
      color: #fff;
      background: #19c589;
      text-align: center;
      padding: 10px 0;
      display: none;
  }
  
  /*Hide checkbox*/
  input[type=checkbox]{
      display: none;
  }
  
  /*Show menu when invisible checkbox is checked*/
  input[type=checkbox]:checked ~ #menu{
      display: block;
  }
  
  
  /*Responsive Styles*/
  
  @media screen and (max-width : 760px){
      /*Make dropdown links appear inline*/
      ul {
          position: static;
          display: none;
      }
      /*Create vertical spacing*/
      li {
          margin-bottom: 1px;
      }
      /*Make all menu links full width*/
      ul li, li a {
          width: 100%;
      }
      /*Display 'show menu' link*/
      .show-menu {
          display:block;
      }
  }    
  
  #nav_wrapper{
       }  
  
  #logo img{
   max-width: 100%;
   height: auto;
  }
  
   #nav{
       background-color: #222;
       width: 100%;
       top:0px;
       left:0px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pageWrapper"&gt; &lt;!-- page wrapper--&gt;
  
    &lt;div id="nav"&gt; &lt;!-- nav--&gt;
  
     &lt;div id="logo"&gt;
  &lt;img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /&gt;&lt;/div&gt; 
  
  
  &lt;div id="nav_wrapper"&gt; &lt;!-- nav wrapper--&gt;
  &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
      &lt;input type="checkbox" id="show-menu" role="button"&gt;
          &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;About ￬&lt;/a&gt;
              &lt;ul class="hidden"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;What We Do&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Portfolio ￬&lt;/a&gt;
              &lt;ul class="hidden"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Web &amp; User Interface Design&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Illustration&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt; 
  &lt;!-- end of nav wrapper--&gt;
    &lt;/div&gt; &lt;!-- end of nav--&gt;
  
  
     &lt;/div&gt; &lt;!-- end of page wrapper--&gt;</code></pre>
  </div>
  </div>
  </p>