jquery takes away navigation bar

Question

when my sites window size is small (mobile view) and user clicks on hamburger menu I use jquery to fade in the navigation menu. When I click outside of the navigation its fades the navigation menu out.

if I resize my window larger my navigation bar should resize it self, however it is not even there. I'm guessing because I faded it out with jquery.

I tried make it the script run only if the window size was less than certain size, but navigation menu is still gone when i resize larger.

how can I fix this?

jquery script

//fades in
$("#mobileNav").click(function(){

  $(".nav").fadeIn("slow");
  event.stopPropagation();

})


// fade out on click outside of navigation menu
window.onclick = function(event) {
  if (!event.target.matches('.nav')) {
    isSmallWindow = $(window).width() < 600;
    if(isSmallWindow) {
      $(".nav").fadeOut("slow");
    }
  }

$(window).resize(function() {

        isBigWindow = $(window).width() > 600;
            if(isBigWindow) {
                            $(".nav").show();
            }
                    });

html

            <div id="mobileNav" class="mobileNavContainer floatLeft">
                <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>

            <div id="para1" class="floatLeft"></div>

            </div>




        <!----------  NAVIGATION  ---------->
        <div class="nav">




                <!-- link icons have custom css - icon -->
                <a href="index.php?page=clients" title="Clients">
                    <span class="navIcon">
                        <i class="fa fa-users icon" aria-hidden="true"></i>
                    </span>
                    <span class="navText">
                        Clients
                    </span>
                </a>

                <a href="index.php?page=invoices" title="Invoices">
                    <span class="navIcon">
                        <i class="fas fa-file-invoice icon"></i>
                    </span>
                    <span class="navText">
                        Invoices
                    </span>
                </a>



        </div>

Answer 1

You'll probably need to add a resize event to check if the window is larger than 600 otherwise it will never know when to show the nav again.

$(window).on('resize', function(e){
  if($(this).width() > 600 && $('.nav:visible').length == 0){
   $('.nav').fadeIn();
  }
});