If jQuery is used then the element is hidden even when it shouldn't

If jQuery is used then the element is hidden even when it shouldn't

The site www.jaanavuola.com is using simple jQuery code for hiding and showing mobile menu. 

    jQuery(document).ready(function($){
    
      // $(".site-header")site.hide();
      // $(".open-close-mob-nav").show();
    
      $('.open-close-mob-nav').click(function(){
      $(".site-header").fadeToggle(400);
      });
    
    });

The button (upper right corner - two lines and text "Valikko") appears when the windows is max 860px wide. 

The site has normally a side bar navigation panel which is hidden when the width is less than 860px. If the mobile navigation buttons is then pressed to activate the hidden side bar and then the browser windows is resized back to more than 860px the side bar doesn't appear. Why this is happening?