title: Media Queries to keep menu and sidebar from merging with header/body
body: <p><a href="http://camillagabrieli.com/blog/" rel="nofollow">This is the website, and more specifically, the page</a>.</p>
  
  <p>I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.</p>
  
  <pre><code>@media only screen and (min-width:768px) {
  .site-navigation .nav-menu {
   display: block;
  }
  }@media only screen and (max-width:767px) {
  .menu-toggle {
  display: block;
  }
  }@media only screen and (min-width:768px) and (max-width:959px) {
  .wrap {
  max-width: 728px;
  }
  </code></pre>
  
  <p>That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?</p>