Mobile menu

When scrolling, not the menu scrolls, but the content that is under the menu. How to fix? The block with the menu position: fixed.

  • You can insert a code or an example link here so that we can see what the problem is and give a concise answer - Yuri
  • example - jsfiddle.net/soledar10/y8x76w4j - soledar10
  • link I can not figure out where to write overflow @Yuri - extens

2 answers 2

You need to limit the maximum height for the drop-down menu on mobile devices. Restrict the following styles as needed with @media :

 .wrap_mobile_menu { max-height: calc(100vh - 50px); // 100% от высоты экрана - высота верхней плашки overflow-y: auto; }

Here relative units come to the rescue.

  • Thanks, very helpful - extens

Make the menu expand to the end of the screen, then remove the scroll from the window and assign it to the menu. Like this:

 $(function() { $('.but').click(function() { $('.menu').toggle(); if($('body').hasClass('ns')){ $('body').removeClass('ns'); }else{ $('body').addClass('ns'); }; }); }); 
 body {height: 2000px;} body.ns {overflow-y: hidden} .nav { display: block; position:fixed; top:0; left:0; width:100%; height: 40px; background-color: grey } .menu { display: none; position: absolute; top: 40px; height: calc(100vh - 40px); /* Это что бы сделать до конца экрана */ left: 0; right: 0; background-color: #eee; overflow-y: scroll; /* Это для скрола */ } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <button class="but">Открыть меню</button> <div class="menu"> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> <li>Пункт 8</li> <li>Пункт 9</li> <li>Пункт 10</li> <li>Пункт 11</li> <li>Пункт 12</li> <li>Пункт 13</li> <li>Пункт 14</li> <li>Пункт 15</li> <li>Пункт 16</li> <li>Пункт 17</li> <li>Пункт 18</li> <li>Пункт 19</li> <li>Пункт 20</li> <li>Пункт 21</li> <li>Пункт 22</li> <li>Пункт 23</li> <li>Пункт 24</li> <li>Пункт 25</li> <li>Пункт 26</li> <li>Пункт 27</li> </ul> </div> </div>

  • Thank you so much for getting so confused) - extens