Js

$( ".cross" ).hide(); $( ".menu" ).hide(); $( ".hamburger" ).click(function() { $( ".menu" ).slideToggle( "slow", function() { $( ".hamburger" ).hide(); $( ".cross" ).show(); }); });

HTML

  <header> <div class="logo"> <a href="#"><img src="img/header/Logo.png" alt="Snowboarding shop"></a> </div> <button class="hamburger">&#9776;</button> <button class="cross">&#735;</button> <nav> <ul> <li><a href="#">Shop</a></li> <li><a href="#">Team</a></li> <li><a href="#">Events</a></li> <li><a href="#">Expirience</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="menu"> <ul> <li><a href="#">Shop</a></li> <li><a href="#">Team</a></li> <li><a href="#">Events</a></li> <li><a href="#">Expirience</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact</a></li> </ul> </div> <form> <input type="search" id="search"> <button> <img src="img/header/tool.svg" alt="search"> search </button> </form> <div class="shopbag"> <img src="img/header/shoppingbag.png" alt="shopingbag"> <p>€0</p> </div> </header>

When you click on the navigation menu and increase the scale of the page, the menu remains and the media queries do not help, help to finish the script so that the menu is always removed?

  • Html part of the lay out too, without it is not clear. - Mr_Epic
  • I mean, when scrolling the site, it adapts, but if you scale back, the menu icon remains and is not removed. - SvArt713
  • The question is formulated incorrectly. After clicking the menu, they click on the link in the menu, and do not increase the page. - Jean-Claude
  • Is it not possible that the links will not be passed, and then scroll through the screen? - SvArt713

2 answers 2

Your script is incomplete, done here: when you click on a hamburger, the menu is shown, the hamburger is removed, the closing is shown, when you click on the closing, the hamburger is shown, the menu is removed.

 $(function(){ $( ".cross" ).hide(); $( ".menu" ).hide(); $( ".hamburger" ).click(function() { $( ".menu" ).slideToggle( "slow", function() { $( ".hamburger" ).hide(); $( ".cross" ).show(); }); }); $( ".cross" ).click(function(){ $( ".hamburger" ).show(); $( ".cross" ).hide(); $( ".menu" ).hide(); }); }); 
 button { width: 40px; height: 30px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <button class="hamburger">&#9776;</button> <button class="cross">&#735;</button> <nav> <ul> <li><a href="#">Shop</a></li> <li><a href="#">Team</a></li> <li><a href="#">Events</a></li> <li><a href="#">Expirience</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="menu"> <ul> <li><a href="#">Shop</a></li> <li><a href="#">Team</a></li> <li><a href="#">Events</a></li> <li><a href="#">Expirience</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header>

  • Thank you, but the question is different. After the menu is opened and closed (you can leave it open, it doesn't matter) and zoom out, the menu button does not disappear and gets confused with the original menu (which is hidden by media queries). - SvArt713
  • @ SvArt713 Well, write down its hiding in media queries. - Jean-Claude
  • I wrote, but for some reason it is not removed, the script means true, something with CSS? - SvArt713
  • @ SvArt713 probably didn’t register there. - Jean-Claude

Everything is correct, the script is correct, the issue is solved by setting the font-size: 0 for the text of the buttons, then they will not be shown when scrolling.