Responsive menu issues

Question

(First I'd like to apologize if my English is bad sometimes, I'm French, so it's kinda difficult to explain everything in details )

I'm working on a personal website, but i got a problem with my responsive navigation.

I made a media query for screen size under 1024px.

When I'm above 1024px, I have my regular navigation bar made with a list. When I'm under 1024px, I got the small menu logo that appears, and a click event on it makes the whole menu appear and disappear.

But the problem is that if my menu is closed and I expand my window above 1024 pixels, the list isn't visible, and I don't know how to deal with that problem.

Here is my code :

        <nav class="fixed_nav">
        <div id="nav_left">
            <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/>
            <p id="txt_nav">123</p>
        </div>
        <ul class="topnav">
            <div id="show_n_hide_nav" class="responsive_link_bg">
                <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 2</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 3</a></li>
            </div>
            <li class="icon">
                <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a>
            </li>
        </ul>
    </nav>

Jquery for the click:

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});

In my css, I hide the original list under 1024 pixels, and show it with the help of jquery when the users clicks on the menu logo.

Again, sorry if it's hard to understand.

Answer 1

After you solve the invalid HTML, you can try this:

The problem is the slideUp/Down function from Jquery sets inline the display property to the element itself, then when you slideUp and resize the browser the element is still hidden with inline style:

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">

You can solve it adding this mediaquerie to force the element be block over 1024:

@media (min-width:1025px) {
  #show_n_hide_nav {
    display: block !important;
  }
}

Check this example Fiddle