CODEWITHSUNDEEP
jquerycssnav
RickRC
RickRC

Reputation: 13

Jquery toggles menu for mobile, potentially leaves it off when resized up to desktop

I'm currently working on a responsive site with a horizontal navigation menu and switches to a clickable menu icon that expands for mobile. The menu looks fine at desktop resolution and works great on mobile.

My problem happens if I scale my browser down past my resolution breakpoint. It switches to the mobile menu icon and hides my standard menu. If i click the icon the menu shows up. click it again it goes away. everything is fine. When I scale the browser back up the original menu will show up if i left the mobile toggled visible and if i didn't activate the toggle in the first place but if i activate it, then close the mobile menu, then scale back up, the standard menu keeps the toggle hidden aspect and never reappears.

As far as I can tell, I would need the jquery to force the toggle back to visible when i scale back up past my media query breakpoint. but I have no idea how to do that and I haven't found this problem elsewhere online.

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

is the function I was using:

<nav id="nav-wrap">
        <div id="menu-icon"><img src="../img/menu.png"></div>
        <ul id="nav">
        <li><a href="default.htm">Home</a></li>
        <li><a href="obstacles.htm">Obstacles</a></li>
        <li><a href="location.htm">Location</a></li>
        <li><a href="register.htm">Register</a></li>
        <li><a href="sponsor.htm">Sponsor</a></li>
        <li><a href="volunteer.htm">Volunteer</a></li>
        <li><a href="faqs.htm">FAQs/Documents</a></li>
        </ul>
        </nav>

is my navigation menu and:

#nav {
    text-align:center;
    font-size:1em;
    text-transform:uppercase;
    font-weight:900;
    margin:1em auto;
    display:block;
}
#nav li {
    display:inline;
    text-align:center;
    margin:1em 2em;
}
#menu-icon {
    display:none;
}
@media screen and (max-width:600px) {
#menu-icon {
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    margin:0em auto 1em auto;
}
#nav {
    clear:both;
    z-index:10000;
    padding:5px;
    background:#000;
    border:solid 1px #f1f1eb;
    display:none;
}
}

edit: i forgot to add. I tried to work around this by using a separate nav with a different ID that would go hidden when it scaled down, but that had the opposite problem, where half the time I'd scale back up and have 2 nav menus because the jquery #nav would be toggled on

Upvotes: 1

Views: 1420

Answers (1)

JerryHuang.me
JerryHuang.me

Reputation: 1790

Use a window.resize function to check for viewport and add $("#nav").show();

JS

$(window).resize(function() {
    //Add a set timeout to prevent resource hogging
    myWinWidth();
});

function myWinWidth() {
    var winWidth = $(window).width();
    console.log(winWidth);    
        if(winWidth > 600){
                 $("#nav").show();          
        }
    return false;
};

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

Fiddle

http://jsfiddle.net/5DQs8/8/

Upvotes: 1

Related Questions