title: Overflow-x hidden causing responsive nav menu positing issue
body: <p><strong>Question Background:</strong></p>
  
  <p>I am using Jasny Bootstrap to implement a responsive offcanvas 'reveal' style menu.</p>
  
  <p><strong>The Issue:</strong></p>
  
  <p>When the menu is opened on a mobile device the scrolling element of the menu is not enabling.</p>
  
  <p>I have wrapped the entire app (where my AngularJS view is injected) with a div style <code>overflow-y:hidden</code> as shown:</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
      &lt;div style="overflow-x:hidden"&gt;
          &lt;div ui-view style="height:100%"&gt;
              //View is injected here based on routing.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This overflow styling means i can now scroll the menu on a mobile device but i now have an issue where and When the menu is scrolled to the top there is a gap showing the menu underneath as shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/lGn3L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lGn3L.jpg" alt="enter image description here"></a></p>
  
  <p>Once the page is scrolled down slightly the responsive navbar shows:</p>
  
  <p><a href="https://i.stack.imgur.com/7ig40.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ig40.jpg" alt="enter image description here"></a></p>
  
  <p><strong>The Code:</strong></p>
  
  <p>The Following is as shown above, This is the main View div where the page is injected depending on its routing:</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
      &lt;div style="overflow-x:hidden"&gt;
          &lt;div ui-view style="height:100%"&gt;
              //View is injected here based on routing.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the Results view of the app which contains the navbar elements:</p>
  
  <pre><code>&lt;div ng-controller="ResultsController" ng-show="hideSearch" style="height:100%"&gt;
      &lt;div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu"&gt;
          &lt;div class="text-center headerPad"&gt;&lt;h3&gt;Compzee &lt;img src="Images/CompzeeLogoSmall.png" class="logoSize" /&gt;&lt;/h3&gt;&lt;/div&gt;
          &lt;div class="col-lg-12 pullInMenu"&gt;
              &lt;form ng-submit="search()" novalidate="novalidate"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Search Term:&lt;/label&gt;
                      &lt;input type="text" class="form-control" ng-model="item" id="itemUpdate" required&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Product Category:&lt;/label&gt;
                      &lt;select class="form-control" ng-model="catagory" required&gt;
                          &lt;option value="" disabled selected&gt;Select A Product Category&lt;/option&gt;
                          &lt;option&gt;All&lt;/option&gt;
                          &lt;option&gt;Baby&lt;/option&gt;
                          &lt;option&gt;Business, Office &amp;amp; Industrial&lt;/option&gt;
                          &lt;option&gt;Cameras &amp;amp; Photography&lt;/option&gt;
                          &lt;option&gt;Clothes &amp;amp; Accessories&lt;/option&gt;
                          &lt;option&gt;Comics, Books &amp;amp; Magazines&lt;/option&gt;
                          &lt;option&gt;Computers &amp;amp; Tablets&lt;/option&gt;
                          &lt;option&gt;Consoles&lt;/option&gt;
                          &lt;option&gt;DVD's, Films &amp;amp; TV&lt;/option&gt;
                          &lt;option&gt;Garden &amp;amp; Patio&lt;/option&gt;
                          &lt;option&gt;Health &amp;amp; Beauty&lt;/option&gt;
                          &lt;option&gt;Holiday &amp;amp; Travel&lt;/option&gt;
                          &lt;option&gt;Home&lt;/option&gt;
                          &lt;option&gt;Kitchen&lt;/option&gt;
                          &lt;option&gt;Jewellery&lt;/option&gt;
                          &lt;option&gt;Mobile Phones &amp;amp; Accessories&lt;/option&gt;
                          &lt;option&gt;Musical Instruments&lt;/option&gt;
                          &lt;option&gt;Music&lt;/option&gt;
                          &lt;option&gt;Pet Supplies&lt;/option&gt;
                          &lt;option&gt;Shoes&lt;/option&gt;
                          &lt;option&gt;Sporting Goods&lt;/option&gt;
                          &lt;option&gt;Toys &amp;amp; Games&lt;/option&gt;
                          &lt;option&gt;Vehicle Parts &amp;amp; Accessories&lt;/option&gt;
                          &lt;option&gt;Video Games&lt;/option&gt;
                          &lt;option&gt;Watches&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Country:&lt;/label&gt;
                      &lt;select class="form-control" ng-model="selectedCountry" required&gt;
                          &lt;option value="" disabled selected&gt;Select A Country&lt;/option&gt;
                          &lt;option&gt;UK&lt;/option&gt;
                          &lt;option&gt;US&lt;/option&gt;
                          &lt;option&gt;FR&lt;/option&gt;
                          &lt;option&gt;DE&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="text-center"&gt;
                          &lt;img ng-src="{{countryImg}}" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Marketplace&lt;/label&gt;
                      &lt;select class="form-control" ng-model="selectedMarketPlace" required&gt;
                          &lt;option value="" disabled selected&gt;Select A Marketplace&lt;/option&gt;
                          &lt;option&gt;Ebay &amp; Amazon&lt;/option&gt;
                          &lt;option&gt;Ebay&lt;/option&gt;
                          &lt;option&gt;Amazon&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="text-center"&gt;
                          &lt;img class="marketPlaces" ng-src="{{image}}" /&gt;
                          &lt;img class="marketPlaces" ng-show=" showImg" ng-src="{{imageSecond}}" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="content"&gt;
                          &lt;rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"&gt;&lt;/rzslider&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Min Price&lt;/label&gt;
                      &lt;input type="text" class="form-control" ng-model="minTextVal" id="slider-margin-value-min" readonly&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="search"&gt;Max Price&lt;/label&gt;
                      &lt;input type="text" class="form-control" ng-model="maxTextVal" id="slider-margin-value-max" readonly&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group text-center"&gt;
                      &lt;label for="search"&gt;Prices High To low&lt;/label&gt;
                      &lt;input id="highToLowBox" type="radio" ng-value="true" ng-model="priceOrder"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group text-center"&gt;
                      &lt;label for="search"&gt;Prices Low To high&lt;/label&gt;
                      &lt;input id="lowToHighBox" type="radio" ng-value="false" ng-model="priceOrder"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;button class="btn btn-success" ladda="searchingService.updating" type="submit" data-style="zoom-in" style="width:100%"&gt;
                          &lt;span&gt;Update&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="canvas" id="resultsView"&gt;
          &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="containerId" class="container"&gt;
              &lt;div class="topOffSet "&gt;
                  &lt;div class="col-lg-12 text-center"&gt;
                      &lt;div id="itemHolder"&gt;
                          &lt;h4&gt;&lt;b&gt;{{searchingService.searchList.length}} Results found from your search criteria.&lt;/b&gt;&lt;/h4&gt;
                          &lt;div class="panel panel-default col-lg-12 text-center" ng-show="searchingService.noResults"&gt;
                              &lt;div class="panel-body"&gt;&lt;img src="Images/CompzeeLogoSmall.png" class="logoSize" /&gt;&lt;p&gt;We could not find any results to match your search criteria&lt;/p&gt;&lt;p&gt;Please review your search terms and try again.&lt;/p&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div ng-repeat="item in searchingService.filteredItems" class="col-lg-4"&gt;
                              &lt;div class="panel panel-default maxPanelHeight"&gt;
                                  &lt;div class="panel-heading textOverflow" id="panelHeading"&gt;
                                      &lt;h3 class="panel-title text-center"&gt;&lt;b&gt;{{item.Title}}&lt;/b&gt;&lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div class="panel-body"&gt;
                                      &lt;a href={{item.url}} target="_blank"&gt;&lt;img src={{item.Image}} class="picHeight img-rounded img-responsive center-block" /&gt;&lt;/a&gt;
                                      &lt;h4 class="text-center"&gt;&lt;b&gt;{{item.Price}}&lt;/b&gt;&lt;/h4&gt;
                                      &lt;h4 class="text-center"&gt;&lt;a href={{item.url}} class="btn btn-success" target="_blank"&gt;See More&lt;/a&gt;&lt;/h4&gt;
                                      &lt;div class="text-center"&gt;&lt;img class="originPic" src={{item.marketPlaceImg}} /&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-12 text-center"&gt;
                  &lt;uib-pagination total-items="items.length" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false"&gt;
                  &lt;/uib-pagination&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>