移动视图中导航的问题

Question

I am trying to have an icon that is going to show up in my mobile veiw where you can click show and hide the menu, right now my code doesnt work, it does not open at all

my problem is trying to figure out id's and inputs here

not sure what I am doing wrong, could someone point me to the right direction please ? Thanks in advance

//this is what I have

<nav class="navMenu">
<input id="menu-icon" type="checkbox">
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label>
<ul>

    <li>
        <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
    </li>
    <li>
        <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
    </li>
    <li>
        <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
    </li>
    <li id="loggedin-box" class="">
        <form method="POST" action="login">
        <div>
            <strong>some name</strong>
        </div>
        <button style="padding:0px;" name="logout" type="submit">
        <img class="navImg" src="media/Sign-Out.png">
        </button>
        </form>
    </li>
</ul>
</nav>

//js file

$(function() {
  var menuVisible = false;
  $('#menu-icon').click(function() {
    if (menuVisible) {
      $('.navMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('.navMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('.navMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

Answer 1

You have two ids sharing the same name. 'menu-icon' try changing one of the ids to another name. IDs should be unique. -- ALSO move your input field out of the nav tag.