Good day! Trying to learn how to make a hamburger menu, but it does not work.

Help advice how to make this design work on mobile devices? So that with @media 600px menu and links to the networks are hidden under the button and become next to the logo. Thank you in advance!

 .menu { width: 90%; height: 100px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding-left: 5%; padding-right: 5%; } .menu__category li { display: inline; padding: 20px; } .menu__category a { padding-bottom: 36px; transition: all 0.2s ease; color: black; } .menu__category a:hover { border-bottom: 6px solid #ec4e4e; color: #ec4e4e; } .menu__social i { padding: 10px; transition: color 0.2s ease; font-size: 18px; } .menu__social i:hover { color: #ec4e4e; } 
 <div class="menu"> <div class="menu__logo"> <img src="img/logo.png" alt="logo"> </div> <div class="menu__category"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> <div class="menu__social"> <i class="fa fa-vk" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </div>

    2 answers 2

    1) Add after menu__logo

     <a href="#" class="mobile_menu_click">Бургер</a>

    2) Connect jquery

      <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    3) Add to CSS:

      .mobile_menu_click{ display: none; } @media screen and (max-width: 600px){ .menu__category{ display: none; } .mobile_menu_click{ display: block; } .menu__category li { display: block; } }

    4) Add a short JS code:

      <script> $('.mobile_menu_click').click(function(){ $('.menu__category').fadeToggle(); }); </script>

    As for the hamburger icon itself, the network is full of ready-made solutions. Everything else is css

      And it is better to take out .menu__logo beyond .menu (put in front)

       <div class="menu__logo"> <img src="img/logo.png" alt="logo"> </div> <a href="#" class="mobile_menu_click">Бургер</a> <div class="menu"> <div class="menu__category"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> <div class="menu__social"> <i class="fa fa-vk" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </div>

      So it will be easier to stylize elements.

      • In the example, BEM is used, if you take the .menu__logo out of the .menu , then the structure will be broken. - Sasha Omelchenko