mnX_87 mnX_87 - 5 months ago 14
CSS Question

Responsive menu issues

(First i'd like to apologize if my english is bad sometimes, I'm french, so it's kinda diffucult to explain everything in details )

Hello everyone !

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

I made a media query for screensize 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 on it make the whole menu appear and desapear.

But the problem is that if my menu is closed and i expand my window above 1024, 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">Romain Chemartin</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 px, and show it with the jquery when the users clicks on the menu logo.

Again, sorry if it's hard to understand.

Thanks for the help :)

Answer

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