title: Web page not shifting far enough for mmenu
body: <p>I have setup mmenu to clone my current menu and put a toggle button that only appears when the screen is less then a specific width. This all works and mmenu worked without an issue. I have sense updated my code to add in new items for the site and now the mmenu doesn't work completely.</p>
  
  <p>The menu still comes out with the toggle and all of that is fine, but the main page is not sliding over far enough. I also have a problem that leads to a gap between the mmenu and my page (with the shadow on the page side). I am using the Skeleton CSS Boilerplate for the site's layout. While Chrome Inspector does not indicate the margins being the issue (to keep the content centered), I think it is causing the issue but I am not sure how to solve it.</p>
  
  <p>The main change before I noticed this happening was code to fix the menu (or toggle when it goes to use mmenu) to the top when you scroll down. This initially caused and issue when the menu would only display in the top section. I resolved that issue with being more exact on my CSS. Does anyone have any thoughts or experience with this kind of issue (the content not sliding all the way over for the menu).</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
  &lt;meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=0 minimum-scale=1.0 maximum-scale=1.0" /&gt;
  
  &lt;title&gt;Title&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="css/main.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="css/skeleton.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="css/jquery.mmenu.css" type="text/css" /&gt;
  &lt;script src="js/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.mmenu.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.simplyscroll.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/SiteJava.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container" id="page"&gt;
          &lt;div id="banner" class="sixteen columns" align="center"&gt;
              &lt;img class="scale-with-grid" src="images/banner.gif" alt="Banner Place Holder"&gt;
          &lt;/div&gt;
          &lt;div id="Navigation" class="sixteen columns"&gt;
              &lt;a href="#mainnav" id="mobilenav" &gt;Menu&lt;/a&gt;
              &lt;nav id="mainnav"&gt;
                  &lt;ul&gt;
                  &lt;li&gt;
                  &lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                  &lt;a href="#"&gt;Events&lt;/a&gt;
                 &lt;ul&gt;
                  &lt;li&gt;&lt;a href="search-states-map.php"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="what_people_are_saying.html"&gt;Comments&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="why_come.html" target="_self"&gt;Why Come?&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="prepare.html" target="_self"&gt;How to prepare &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="faq2.html"&gt;FAQS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="thankyou.html"&gt;Benefactors&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                  &lt;a href="#"&gt;Camps&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="camps.html"&gt;General Info&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="schedule.php"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="whattobring.html"&gt;What to bring&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="mail_camp.html"&gt;Register/Mail&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="faqs.html"&gt;FAQS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;            
                  &lt;/li&gt;
  
                  &lt;li&gt;
                  &lt;a href="#"&gt;Register Now&lt;/a&gt;
                  &lt;ul&gt;  
                       &lt;li&gt;&lt;a href="search-states-map.php"&gt;Online&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="mail.html"&gt;By Mail&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;            
                  &lt;/li&gt;
  
                  &lt;li&gt;
                  &lt;a href="#"&gt;About Us&lt;/a&gt;
                  &lt;ul&gt;
                       &lt;li&gt;&lt;a href="mission.html"&gt;Mission&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="Instructors.html"&gt;Instructors&lt;/a&gt;&lt;/li&gt;                     
                  &lt;/ul&gt;            
                  &lt;/li&gt;           
                  &lt;li&gt;
                  &lt;a href="#"&gt; Links&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="http://site1.com" target="_blank"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://store..com" target="_blank"&gt;Our Store&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="smf/index.php"&gt;Forum&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="join.html"&gt;Join&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="industry_friends.html"&gt;Industry&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="links.html"&gt;Other Links&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;            
                  &lt;/li&gt;
  
                  &lt;li&gt;
                 &lt;a href="latest_news.html"&gt;Latest News&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;li&gt;
                 &lt;a href="contact_us.html"&gt;Email Us&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;       
              &lt;/nav&gt;  
          &lt;/div&gt;
  
  
          &lt;div class="sixteen columns bgc"&gt;
          &lt;div class="content"&gt;
              &lt;p&gt;Content goes here. &lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="sixteen columns simges"&gt;
              &lt;ul id="scroller"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/facebook.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.png" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt; &amp;nbsp; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="scollimg" src="images/banner.jpg" /&gt;&lt;/a&gt;  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="sixteen columns footer"&gt;
              &lt;div class="four columns alpha"&gt; &amp;nbsp; &lt;/div&gt;
              &lt;div class="three columns footc"&gt;
                  &lt;img class="scale-with-grid" src="images/Locations.jpg" /&gt;
              &lt;/div&gt;
              &lt;div class="three columns footc"&gt;
                  &lt;img class="scale-with-grid" src="images/forum.jpg" /&gt; &lt;br /&gt; &lt;br /&gt;
                  &lt;img class="scale-with-grid" src="images/aar.jpg" /&gt;
              &lt;/div&gt;
              &lt;div class="two columns footc"&gt;
                  &lt;h3&gt;About Us&lt;/h3&gt;
                  &lt;a href="mission.html"&gt;Mission&lt;/a&gt; &lt;br /&gt;
                  &lt;a href="instructors.html"&gt;Instructors&lt;/a&gt; &lt;br /&gt;
                  &lt;a href="latest_news.html"&gt;Latest News&lt;/a&gt; &lt;br /&gt;
                  &lt;a href="contact_us.html"&gt;Email Us&lt;/a&gt; &lt;br /&gt;
              &lt;/div&gt;
              &lt;div class="four columns omega"&gt; &amp;nbsp; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Main.css</p>
  
  <pre><code>html {
      margin: 0;
      padding: 0;
  }
  
  Body{
      margin: 0;
      padding: 0;
  }
  
  img, img.scale-with-grid { 
      outline: 0; 
      max-width: 100%; 
      height: auto; 
  }
  
  .drop-shadow {
      -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
      -moz-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
      box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
  }
  
  .footer {
      background-color: black;
      color: white;
      margin: 10px 0px 10px 0px;
      border-radius: 0px 0px 30px 30px;
  }
  
  .footc {
      text-align: center;
      vertical-align: middle;
  }
  
  /* Container DIV - automatically generated */
  .simply-scroll-container { 
      position: relative;
  }
  
  /* Clip DIV - automatically generated */
  .simply-scroll-clip { 
      position: relative;
      overflow: hidden;
  }
  
  /* UL/OL/DIV - the element that simplyScroll is inited on
  Class name automatically added to element */
  .simply-scroll-list { 
      overflow: hidden;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .simply-scroll-list li {
      padding: 0;
      margin: 0;
      list-style: none;
  }
  
  .simply-scroll-list li img {
      border: none;
      display: block;
  }
  
  /* Custom class modifications - adds to / overrides above
  
  .simply-scroll is default base class */
  
  /* Container DIV */
  .simply-scroll { 
      width: 100%;
      height: 75px;
  }
  
  /* Clip DIV */
  .simply-scroll .simply-scroll-clip {
      width: 100%;
      height: 75px;
  }
  
  /* Explicitly set height/width of each list item */ 
  .simply-scroll .simply-scroll-list li {
      float: left; /* Horizontal scroll only */
      width: 150px;
      height: 100%;
  }
  
  .scollimg {
      width: auto;
      height: 75px;
  }
  
  @media (min-width: 960px) {
  body {
      width: 100%;
      height: 100%;
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
  }
  #mm-mainnav {
        display: none !important;
  }
  
  #mobilenav {
      display: none !important;
  }
  
  #small-ql {
      display: none !important;
  }
  
  /*
  .container {
      border: 0px;
      margin-top: 15px;
      margin-bottom: 15px;
  }
  */
  
  .container .Nav-Fix-Top {
      border: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .bgc {
      background-color: gray;
      border-radius: 30px 30px 0px 0px;
  }
  
  .simges {
      background-color: white;
      margin-top: 10px;
  }
  
  .content {
      width: 920px;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  .Nav-Fix-Top {
      position: fixed;
      background-color: gray;
      margin: 0 10px 0 10px;
      z-index: 100;
  }
  
  nav{
      text-align:left;
      /* height here works in FF, not IE6 */
      /*height:20px;*/
      padding-bottom: 15px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;    
      font-weight: bold;
      margin-bottom: 22px;
      margin-right: auto;
      margin-left: auto;
  }
  
    nav li {
      float:left;
      background:url("../images/button.jpg")
        repeat-x right top; 
        width:104.4px;
      margin:0;
      padding:0;
      }
  
  
    nav a {
        color: red;
      display:block;
      background:url("../images/buttonbackground.jpg")
        repeat-x left top;
        height:22px;
        text-align:center;  
        padding-top: 4px;
      }
  
  
    nav a:hover {
      display:block;
      background:url("../images/buttonbackground.jpg")
        repeat-x left top;
         width:104.4px;
        height:22px;
        text-align:center;  
        padding-top: 4px;
      }
  
  
  nav ul{
     margin:0px; 
     padding:0px;
  }
  
  nav ul li{
     display:inline; 
     float:left;
     list-style:none;
     position:relative; 
   }
  
  nav li a{
     text-decoration:none;
  }
  
  nav li a:hover{
     text-decoration:underline;
  }
  
  nav li ul {
     margin:0px;
     padding:0px;
     display:none; 
     position:absolute; 
     left:0px; top:20px;
  }
  
  
  nav li ul:hover {
  }
  
  
  nav li:hover ul {
     display:block; 
     width:160px;
  }
  
  
  nav li li {
     list-style:none;
     list-style-position:inside;
     display:list-item;
     width: 170px;
  }
  
  
  nav li li a {
     text-align:left;
     text-decoration:none;
     padding-left: 6px;
     width: 117px;
  }
  
  nav li li a:hover {
     text-decoration:underline;
     text-align:left;
     width: 117px;
  }
  
  }
  
  @media (max-width: 959px) {
      #mainnav {
          display: none !important;
      }
  
      body {
          background-color: gray;
      }
  
      #big-ql {
          display: none !important;
      }
  /*      
      .mm-menu.mm-left { 
          width: 70px !important; 
      }
  
      .mm-list a.mm-subopen {
          width: 70px;
      }
  */
  }
  
  @media only screen and (min-width: 768px) and (max-width: 959px) {
      .Nav-Fix-Top {
          position: fixed;
          background-color: gray;
          margin: 0;
          width: 768px;
          z-index: 100;
      }
  
      nav.Nav-Fix-Top {
          height: 100%;
      }
  }
  
  @media only screen and (max-width: 767px) {
      .Nav-Fix-Top {
          position: fixed;
          background-color: gray;
          margin: 0;
          width: 300px;
          z-index: 100;
      }
  
      nav.Nav-Fix-Top {
          height: 100%;
      }
  }
  
  @media only screen and (min-width: 480px) and (max-width: 767px) {
      .Nav-Fix-Top {
          position: fixed;
          background-color: gray;
          margin: 0;
          width: 420px;
          z-index: 100;
      }
  
      nav.Nav-Fix-Top {
          height: 100%;
      }
  }
  </code></pre>
  
  <p>SiteJava.js (custom Java)</p>
  
  <pre><code>$(document).ready(function() {
      $("#mainnav").mmenu({
      // options
      }, {
      // configuration
      clone: true
      });
  
      //$("#mm-mainnav").mmenu().on("opening.mm",function() {
      //  $(".container").css("margin","0");
      //});
  
      //$("#mm-mainnav").mmenu().on("closing.mm",function() {
      //  $(".container").css("margin","");
      //});
  
      //$('.container img').addClass('scale-with-grid'); 
  
      $(window).resize(function() {
          //var win = $(this);
          if ($(this).width() &gt;= 958) {
              $("#mm-mainnav").trigger("close.mm");
          }
      });
  
      $(window).bind('scroll',function() {
          if ($(window).scrollTop() &gt; $("#banner").height()) {
              $("#Navigation").addClass("Nav-Fix-Top");
              $("#Navigation").removeClass("sixteen columns");
              //$("#mainnav").css("height","100%");
              $("#mainnav").css("padding-bottom","0");
              //$("#Navigation").addClass("drop-shadow");
              //$("body").css("margin-top","70px");
          }else{
              $("#Navigation").removeClass("Nav-Fix-Top");
              $("#Navigation").addClass("sixteen columns");
              //$("#mainnav").css("height","");
              $("#mainnav").css("padding-bottom","");
              //$("#Navigation").removeClass("drop-shadow");
              //$("body").css("margin-top","0");
          }
      });
  
      $(function() { //on DOM ready 
              $("#scroller").simplyScroll();
      });
  
  });
  </code></pre>
  
  <p>This is my first time using stackoverflow, so if I posted the code wrong, sorry. Also, only the nav part is being used for mmenu, the links at the bottom do not use mmenu.</p>