showing navigation after set width in jquery

Question

I'm trying to build my own responsive navigation menu, I'm doing mobile first then up. The menu works great upto my set media width 40em's, then I can't see the menu after that. What I need help with is to drop the function at a set width so i can simply code the rest in css or use a if else statement that says if max-width 40em (hide), else (show).

This works upto 40em or 641px

$(document).ready(function() {
$(".navbar").hide();
$(".toggle").click(function() {
    $(".navbar").slideToggle("slow", function() {
        // Animation complete.
    });
});

Thanks in advance.

Answer 1

Needed to add the window resize function

$(document).ready(function() {
$(window).resize(function(){
    if ($(window).width() <= 1024){  
        $(".navbar").hide();
    }   else {
        $(".navbar").show();
    }
});
$(".toggle").click(function() {
    $(".navbar").slideToggle("slow", function() {
        // Animation complete.
    });
});