title: Responsive menu's sub-menus not forcing scrolling when flowing offscreen
body: <p>Edit: Problem solved by a user on another site. I have summarised this as a separate answer.</p>
  
  <p>=====</p>
  
  <p>Edit: I have tried various overflow settings for the nav but still nothing. This must be something simple, but I can't find it. Anyone?</p>
  
  <p>=====</p>
  
  <p>I have a responsive menu that is sticky when reaching the top of the page in larger windows, but fixed to the top permanently when displaying the hamburger. The menu is using Todd Motto's flaunt.js menu: <a href="https://toddmotto.com/labs/flaunt-js/" rel="nofollow noreferrer">https://toddmotto.com/labs/flaunt-js/</a></p>
  
  <p>In the original demo (above) the menu is <em>not fixed</em>. Changing the CSS to make the menu fixed has the unfortunate effect of preventing menu scrolling.</p>
  
  <p>I would like to prevent the body scrolling behind, which I can do successfully with jQuery toggleClass, but need to make the menu scrollable as it will often be extending off-screen in hamburger mode on smaller devices.</p>
  
  <p>I have tried adding <strong>overflow-y: scroll</strong> to various parts of the menu structure; this creates the scroll track, but still there is no bar inside and no scrolling even when the menu extends off-screen. </p>
  
  <p>The problem occurs when changing the nav's position in the CSS class <strong>.nav</strong> from <strong>position: relative</strong> in the default style, to <strong>position: fixed</strong> with the media query (max-width: 768px).</p>
  
  <p>Is there a way of enabling the menu to scroll, ideally with the main browser's scrollbar (with the body not scrolling behind)?</p>
  
  <p>My <strong>JS</strong> for preventing body scrolling and potentially enabling menu scrolling, while adding an overlay to the body, is:</p>
  
  <pre><code>$(document).ready(function(){
  $( ".nav-mobile" ).click(function() {
      $( "#overlay" ).toggle();
      $( "#mybody").toggleClass("scroll no-scroll");
      $( "#SomeIDinTheNavSomewhere").toggleClass("scroll no-scroll");
  });
  });
  </code></pre>
  
  <p>with <strong>CSS</strong>:</p>
  
  <pre><code>#overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:  rgba(40,40,40, .75);
  }
  .no-scroll {
  overflow-y: scroll;
  position: fixed;
  }
  .scroll {
  overflow-y: scroll;
  }
  </code></pre>
  
  <p>I have chosen to keep the scroll-track to avoid the burger jumping side to side when toggling as a result of enabling / disabling the body scrolling, rather than using overflow: hidden, but both create the same unwanted behaviour regardless anyway.</p>
  
  <p>A cropped down and minimal version of the flaunt.js menu's html, css and js is below. </p>
  
  <p>jsfiddle <em>position: fixed</em> here: <a href="https://jsfiddle.net/m_d_a/6gtjpvck/1/" rel="nofollow noreferrer">https://jsfiddle.net/m_d_a/6gtjpvck/1/</a></p>
  
  <p>jsiddle <em>position: relative</em> here: <a href="https://jsfiddle.net/m_d_a/6gtjpvck/" rel="nofollow noreferrer">https://jsfiddle.net/m_d_a/6gtjpvck/</a> don't worry about the layout, just to prove scrolling exists when .nav is not fixed.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="nav"&gt;
      &lt;ul class="nav-list"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=home"&gt;Home&lt;/a&gt;
                  &lt;ul class="nav-submenu"&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-1"&gt;Submenu item 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-2"&gt;Submenu item 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-3"&gt;Submenu item 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-4"&gt;Submenu item 4&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=about"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=services"&gt;Services&lt;/a&gt;
                  &lt;ul class="nav-submenu"&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-1"&gt;Submenu item 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-2"&gt;Submenu item 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-3"&gt;Submenu item 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-submenu-item"&gt;
                          &lt;a href="?=submenu-4"&gt;Submenu item 4&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=portfolio"&gt;Portfolio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=testimonials"&gt;Testimonials&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="?=contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>a, a:hover {
  text-decoration:none;
  }
  ul, ol {
  list-style:none;
  }
  
  .nav {
  position:relative;
  display:inline-block;
  font-size:14px;
  font-weight:900;
  }
  .nav-list {
  text-align:left;
  }
  .nav-item {
  float:left;
  *display:inline;
  zoom:1;
  position:relative;
  }
  .nav-item a {
  display:block;
  color:#FFF;
  padding:15px 20px;
  background:#7A1E61;
  border-bottom:1px solid #8B2870;
  }
  .nav-item &gt; a:hover {
  background:#822368;
  }
  .nav-item:hover .nav-submenu {
  display:block;
  }
  
  .nav-submenu {
  display:none;
  position:absolute;
  left:0;
  width:180px;
  }
  .nav-submenu-item a {
  background:#8B2770;
  border-bottom:1px solid #9A337E;
  display:block;
  padding:15px;
  }
  .nav-submenu-item a:hover {
  background:#932C77;
  }
  
  .nav-mobile {
  display:none; /* Hide from browsers that don't support media queries */
  cursor:pointer;
  position:fixed;
  top:0;
  right:0;
  background:#3D3D3B;
  background-size:18px;
  height:50px;
  width:50px;
  }
  
  .nav-click {
  position:absolute;
  top:0;
  right:0;
  display:none;
  border-left:1px solid #8B2870;
  height:49px;
  width:50px;
  cursor:pointer;
  }
  .nav-click i {
  display:block;
  height:48px;
  width:48px;
  background:url(https://toddmotto.com/labs/flaunt-js/img/drop.svg) no-repeat center center;
  background-size:20px;
  }
  .nav-click:hover {
  background-color:#6E1656;
  }
  .nav-rotate {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
  }
  
  /*-----------*\
  Media Queries
  \*-----------*/
  
  @media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav-mobile {
      display:block;
      position: fixed;
  }
  .nav {
      width:100%;
      padding:50px 0 0;
  }
  .nav-list {
      display:none;
  }
  .nav-item {
      width:100%;
      float:none;
   }
  .nav-item &gt; a {
      padding:15px;
  }
  .nav-click {
      display:block;
  }
  .nav-mobile-open {
      border-radius:5px 5px 0 0;
      -webkit-border-radius:5px 5px 0 0;
      -moz-border-radius:5px 5px 0 0;
  }
  .nav-item:hover .nav-submenu {
      display:none;
  }
  .nav-submenu {
      position:static;
      width:100%;
  }
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>;(function($) {
  
  // DOM ready
  $(function() {
  
      // Append the mobile icon nav
      $('.nav').append($('&lt;div class="nav-mobile"&gt;&lt;/div&gt;'));
  
      // Add a &lt;span&gt; to every .nav-item that has a &lt;ul&gt; inside
      $('.nav-item').has('ul').prepend('&lt;span class="nav-click"&gt;&lt;i class="nav-arrow"&gt;&lt;/i&gt;&lt;/span&gt;');
  
      // Click to reveal the nav
      $('.nav-mobile').click(function(){
          $('.nav-list').toggle();
      });
  
      // Dynamic binding to on 'click'
      $('.nav-list').on('click', '.nav-click', function(){
  
          // Toggle the nested nav
          $(this).siblings('.nav-submenu').toggle();
  
          // Toggle the arrow using CSS3 transforms
          $(this).children('.nav-arrow').toggleClass('nav-rotate');
  
      });
  
  });
  
  })(jQuery);
  </code></pre>
  
  <p>Thank you. I realise there may be a bit to wade through here.</p>