Faced such a problem, I wanted to make it so that when I clicked on the menu it stretched to the full width of the screen and the page scrolling would be completely forbidden

Also on some phones the menu is located not in the center but somewhere on the edge, as I showed on the screen below.

It works in the browser, but not from any phone, why is this happening?

Browser scroll does not work:

enter image description here

The menu phone scrolls down: enter image description here

I attach HTML, CSS and JS menu code:

$(document).ready(function() { $('.activatemenu').click(function(){ $('.deactivatemenu').css("position", "absolute"); $('.topmenu').animate({ height: "200%"}, 500); $('.deactivatemenu').animate({ top: "5%"}, 500); $('.activatemenu').fadeOut(250); $('.deactivatemenu').fadeIn(1000); $("html,body").css("overflow", "hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); $('.deactivatemenu').click(function(){ $('.topmenu').animate({ height: "3rem"}, 500); $('.activatemenu').fadeIn(1000); $('.deactivatemenu').fadeOut(250); $("html,body").css("overflow","auto"); $("html,body").css("overflow-x","hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); }); 
 .topmenu { position: absolute; width: 100%; height: 9rem; background: #000; opacity: 0.7; z-index: auto; } .deactivatemenu { display: none; left:45%; transform:translate(-45%); } .fa-times { text-decoration: none; color: #e6e6e6; position: relative; } .mobilemenu { display: block; color: #e6e6e6 !important; font-size: 2em; font-family: 'oswald', sans-serif; transition: 0.35s; text-decoration: none !important; position: relative; border: 1px solid #404040; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="header"> <div class="topmenu"> <div class="col-xs-offset-1"> <div class="deactivatemenu"> <div class="col-xs-12 col-xs-offset-4"> <i class="fa fa-times"></i> <p class="mobiletext">Close</p><br><br> <a href="#home" class="mobilemenu">Home</a><br> <a href="#about" class="mobilemenu">About me</a><br> <a href="#portfolio" class="mobilemenu">Portfolio</a><br> <a href="#comments" class="mobilemenu">Comments</a> </div> </div> <div class="activatemenu"> <i class="fa fa-bars"></i> <p class="mobiletext">Menu</p> </div> </div> </div>

  • I have 2 questions for you, 1) obsalyutnoe positioning. Topmenu What are you doing from? 2) After opening the menu, should he close the entire page? - Raz Galstyan
  • It already closes the entire page, I want to prohibit scrolling on phones, for some reason it is forbidden in the browser, and on phones in the menu it will scroll - user234223
  • tvarinskydesign.16mb.com You can try to go from the phone to the menu and from the browser, for some reason, the browser is not allowed to scrolling, it scrolls the page on the phones. - user234223
  • And $(window).scroll(function(){return false;}); in the right place? - Eugen Eray
  • @EugenEray did not quite understand - user234223

1 answer 1

Well then, there is such an amendment in the code and everything will work for you on all devices:

 $(document).ready(function() { $('.activatemenu').click(function(){ $('.deactivatemenu').css("position", "absolute"); $('.topmenu').animate({ height: "100%"}, 500); $('.deactivatemenu').animate({ top: "5%"}, 500); $('.activatemenu').fadeOut(250); $('.deactivatemenu').fadeIn(1000); $("html,body").css("overflow", "hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); $('.deactivatemenu').click(function(){ $('.topmenu').animate({ height: "3rem"}, 500); $('.activatemenu').fadeIn(1000); $('.deactivatemenu').fadeOut(250); $("html,body").css("overflow","auto"); $("html,body").css("overflow-x","hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); }); 
  .topmenu { position: fixed; width: 100%; height: 9rem; background: #000; opacity: 0.7; z-index: auto; } .deactivatemenu { display: none; left:45%; transform:translate(-45%); } .fa-times { text-decoration: none; color: #e6e6e6; position: relative; } .mobilemenu { display: block; color: #e6e6e6 !important; font-size: 2em; font-family: 'oswald', sans-serif; transition: 0.35s; text-decoration: none !important; position: relative; border: 1px solid #404040; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="topmenu"> <div class="col-xs-offset-1"> <div class="deactivatemenu"> <i class="fa fa-times"></i> <p class="mobiletext">Close</p> <div class="col-xs-12"> <a href="#home" class="mobilemenu">Home</a> <a href="#about" class="mobilemenu">About me</a> <a href="#portfolio" class="mobilemenu">Portfolio</a> <a href="#comments" class="mobilemenu">Comments</a> </div> </div> <div class="activatemenu"> <i class="fa fa-bars"></i> <p class="mobiletext">Menu</p> </div> </div>

  • No changes at all. - user234223
  • Check yourself on your device - user234223
  • I did a check on myself and it all worked, with this piece of code, can it be in another part of the code from you? - Raz Galstyan
  • I filled in the changes with your amendments to the site, but what else could it be connected with? In JS, the page scroll is forbidden, this option also did not fit: document.body.style.overflow = 'hidden'; - user234223
  • Are you sure that the body will roll? not your menu? - Raz Galstyan