Mob Nav Disappears After Resize

[reizer]

hey guys,

I’m trying to create mobile nav from scratch. Can’t understand why I’m getting this problem though:

HTML

<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS

#nav {
    display: none;
}
#toggle {
    background-color: #FF9;
    width: 100%;
}
#toggle::after {
    content: "≡";
    float: right;
}
@media only screen and (min-width: 400px) {
#nav {
    display: block;
}
#toggle {
    display: none;  
}
#nav li {
    float: left;
}
}

JS

$(document).ready(function(){
    $("#toggle").click(function(){
        $("#nav").slideToggle(500);
    });
});

Basically when I resize window without touching anything, all works fine. But if I toggle menu (down and up) while on mobile view, then resize to large view, my normal menu disappears. Although I put “display:block” in media query for web menu.

It seems i can work this around with “!important”, but it seems like a hack to me. I’d like to do it properly from get go.

maybe you guys can help.

[reizer]

thanx Senff,

as I’m not good at programming, I’d like to continue with CSS/HTML on the project. I’ve found this solution by browsing and it seems to have worked. I think it’s browser-proof also as it’s javascript.

$(window).resize(function(){
    if(window.innerWidth > 400) {
        $("#nav").removeAttr("style");
    }
});

[Author]

Posts