Responsive navbar design

Question

I'm learning about responsive web design and now my webpage is almost 100% responsive. The only problem is the navbar, when it turns into a hamburger menu, it should show the dropdown menu when you click on it but it does nothing, I used some javascript because of the tutorial I was watching, but I don't how to use it at the moment.

Here's the html of the navbar:

<nav>
      <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
      <button class="hb-button"><i class="fa fa-bars"></i>
        <ul class="mobilemenu">
          <li class="home">INICIO</li>
          <li class="contacto">CONTACTO</li>
          <li class="registro">REGISTRATE</li>
          <li class="iniciar-s">INICIAR SESION</li>
        </ul>
      </button>
      <ul class="menu">
          <li class="home">INICIO</li>
          <li class="with-arrow">CONTACTO
            <div class="contact-box">
              <h3>Contactanos</h3>
              <form>
               <input type="text" name="" placeholder="Tu nombre">
               <input type="text" name="" placeholder="Tu apellido">
               <input type="text" name="" placeholder="Tu e-mail">
               <textarea name="" id="" cols="30" rows="10" placeholder="Tu mensaje"></textarea>
               <input type="submit" name="" value="Listo" >
              </form>
            </div>
          </li>
          <li class="with-arrow">REGISTRATE
            <div class="register-box">
              <h1>Ingresa tus datos</h1>
              <form>
                <p>¿Cómo te llamas?</p>
                <input type="text" name="" placeholder="Tu nombre">
                <p>¿Cuál es tu apellido?</p>
                <input type="text" name="" placeholder="Tu apellido">
                <p>¿Cuándo naciste?</p>
                <input type="date">
                <p>¿Cómo es tu correo?</p>
                <input type="text" name="" placeholder="Tu e-mail">
                <p>Elige una buena contraseña</p>
                <input type="password" name="" placeholder="Elige una contraseña">
                <p>Confirmala (¡por si acaso!)</p>
                <input type="password" name="" placeholder="Confirmala">
                <input type="submit" name="" value="Listo" >
              </form>
            </div>
          </li>
          <li class="with-arrow">INGRESAR
            <div class="login-box">
              <h2 id="datos-ingreso">Datos</h2>
              <form>

                <input type="text" name="" placeholder="Escribir e-mail">

                <input type="password" name="" placeholder="Escribir Contraseña">
                <input type="submit" name="" value="Listo">
                <a href="">¿Contraseña olvidada?</a>
              </form>
            </div>
          </li>
          </ul>
    </nav>

As you can see, I've made one navbar for the computer and another one for the hamburger menu, now look how I'm trying to make it come to life in css:

.hb-button{
                float: right;
                background: #222;
                color: #ffffff;
                border: none;
                font-size: 18px;
                padding: 5px 10px;
                border-radius: 3px;
                cursor: pointer;
                display: none;
            }
            nav{
                float: right;

                width: 100%;
                float: right;
            }
            nav ul{

                margin: 0;
                padding: 0;
                text-align: center;
                list-style: none;
                position: relative;
                z-index:1000;
                float: right;
            }
            nav li{
                float: right;
                display: inline-block;
                margin-left: 3.66%;
                padding: 1.46%;
                position: relative;
            }
            nav a{
                color: lightgrey;

            }
            nav a:hover {
                color: white;
                text-decoration: none;

            }
            body{
                margin: 0;
                background: #15151515;
                font-family: sans-serif;

            }
            @media screen and (max-width: 768px){
                .logo{
                    float: none;
                }
                .menu.show{
                    max-height: 20em;
                }
                .hb-button{
                    display: inline;
                }
                .superbanner{
                    display: none;
                }
                .values{
                    display: none;
                }
                nav ul li{
                    display: none;
                }
            }

I think that's enough for you to see of the css, the rest is just some details for the font and the hover of the normal navbar. And this is what the tutorial made me do on javascript (which I don't really understand):

$(document).ready(function(){
                $('.hb-button').on('click', function(){
                    $('menu').toggleClass('show');
                });
            });

I hope I was clear, if you need any more info of my program please make me know, thanks.

Answer 1

Kavindra is right. You should use .mobilemenu instead.

$(document).ready(function(){
    $('.hb-button').on('click', function(){
        $('.mobilemenu').toggleClass('show');
    });
});

I see that li is display: none when width is < 768px. You may also add this inside your media query

.show li {
    display: inline-block;
}

Answer 2

You mobile menu has the class mobilemenu. But in your code you add toggle class in menu. It should be;

$(document).ready(function(){
    $('.hb-button').on('click', function(){
        $('.mobilemenu').toggleClass('show');
    });
});