Menu slide toggle. Function not executed on screen width

Question

I'm trying to make a menu for a responsive site. The click function already works but I want the menu to slide up when the screen size is smaller than 850 pixels but I can't seem to get the function to execute.

Here's my code:

$(document).ready(function () {
      $( "#mobile" ).click(function() {
      $( "#fripple" ).slideToggle();
      $( "#site-navigation" ).slideToggle();
      $( "#secondary" ).slideToggle(); 

        if (screen.width >= 850) {
      $( "#fripple" ).show();
      $( "#site-navigation" ).show();
      $( "#secondary" ).show();
    }

    else if (screen.width < 850){

      $( "#fripple" ).slideUp();
      $( "#site-navigation" ).slideUp();
      $( "#secondary" ).slideUp();
    }


    });
});

Answer 1

I think .show() is not needed anymore since you already slideToggle() the display has been changed to block. With window.screen.width your trying to get the device native screen resolution so use $(window).width() instead.

$(document).ready(function(){
    $('#mobile').click(function(){
        $( "#fripple" ).slideToggle();
        $( "#site-navigation" ).slideToggle();
        $( "#secondary" ).slideToggle(); 


        if($(window).width() < 850){
            $( "#fripple" ).slideUp();
            $( "#site-navigation" ).slideUp();
            $( "#secondary" ).slideUp();
        }
   });
});