Window-size-dependent navigation menu with animation effects Other people will be looking at this jquery code and i'm not an expert with jQuery so im asking. How can i make this jQuery code shorter, more efficient, and easier to read? 

/* 
HEADER NAVIGATION 
*/
/* navigation tabs click highlight */
$(".header-main-tabs").click(function() {
$(".header-main-tabs").removeClass("header-tab-selected");
$(this).addClass("header-tab-selected");
});
/* drop menu hide and show for desktop */
$(".header-main-tabs").hover(function() {
$(this).children(".header-drop-menu").toggleClass("show-drop-menu-hover");
});

/* search input hide and show when search icon is pressed */
$("#search-icon-container span").click(function() {
$(this).toggleClass("fa-times");
$("#search-input-container").fadeToggle("fast");
});

/* mobile navigation */
/* show mobile tabs when toggle nav mobile button is clicked and when browser width is      over 990px */
/* toggle mobile navigation when nav button is clicked */
$("#toggle-mobile-nav").click(function() {
$("#nav-tabs-list").slideToggle();
$("#toggle-mobile-nav").toggleClass("toggle-mobile-nav-clicked");
});

var browserWidth = $(window).width();

$(window).resize(function() {
browserWidth = $(window).width();
if (browserWidth &gt; 990) {
    $("#nav-tabs-list").show();
}
 });

$('#nav-tabs-list li').click(function() {
if (browserWidth &lt;= 990) {
    $('#nav-tabs-list').slideUp();
}
});

/* always show drop menu when on mobile version (when browser width is below 960px) */
$(document).ready(function() { 
fadeMobile();  
});

$(window).resize(function() { 
  fadeMobile();  
});

function fadeMobile() {
  browserWidth = $(window).width(); 
  if (browserWidth &lt; 990) { 
$("#nav-tabs-list").hide();
    $('.header-drop-menu').show(); 
    $("#toggle-mobile-nav").removeClass("toggle-mobile-nav-clicked");
      }
    }
Easier to Read

Make sure you use the same standard everywhere, indent nicely and be consistent. Then the code already looks a lot better:

/* 
HEADER NAVIGATION 
*/

/* navigation tabs click highlight */
$(".header-main-tabs").click(function() {
    $(".header-main-tabs").removeClass("header-tab-selected");
    $(this).addClass("header-tab-selected");
});

/* drop menu hide and show for desktop */
$(".header-main-tabs").hover(function() {
    $(this).children(".header-drop-menu").toggleClass("show-drop-menu-hover");
});

/* search input hide and show when search icon is pressed */
$("#search-icon-container span").click(function() {
    $(this).toggleClass("fa-times");
    $("#search-input-container").fadeToggle("fast");
});

/* mobile navigation */
/* show mobile tabs when toggle nav mobile button is clicked and when browser width is      over 990px */
/* toggle mobile navigation when nav button is clicked */
$("#toggle-mobile-nav").click(function() {
    $("#nav-tabs-list").slideToggle();
    $("#toggle-mobile-nav").toggleClass("toggle-mobile-nav-clicked");
});

var browserWidth = $(window).width();

$(window).resize(function() {
    browserWidth = $(window).width();
    if (browserWidth &gt; 990) {
        $("#nav-tabs-list").show();
    }
});

$('#nav-tabs-list li').click(function() {
    if (browserWidth &lt;= 990) {
        $('#nav-tabs-list').slideUp();
    }
});

/* always show drop menu when on mobile version (when browser width is below 960px) */
$(document).ready(function() { 
    fadeMobile();  
});

$(window).resize(function() { 
    fadeMobile();  
});

function fadeMobile() {
    browserWidth = $(window).width(); 
    if (browserWidth &lt; 990) { 
        $("#nav-tabs-list").hide();
        $('.header-drop-menu').show(); 
        $("#toggle-mobile-nav").removeClass("toggle-mobile-nav-clicked");
    }
}


Shorter


Don't use $('...') twice for the same selector and don't use it in an event. Instead, save the element in a variable and use that. It's both faster and easier to read
Group events on the same element. The first 2 events are both placed on $('.header-main-tabs'), group them together
Put all code in the $(document).ready() callback, this will avoid "DOM not ready" errors
Use CSS to hide/show elements, don't use jQuery for that
Combine the same events, you now have 2 $(window).resize() events
Don't show on each resize, only show if it was hidden before
Don't use global variables to store data




/* 
HEADER NAVIGATION 
*/

$(document).ready(function () {

    var $mainTabs = $(".header-main-tabs");
    var $searchInputContainer = $("#search-input-container");

    $mainTabs
        .click(function() { // navigation tabs click highlight
            $mainTabs.removeClass("header-tab-selected");

            $(this).addClass("header-tab-selected");
        }) 
        .hover(function() { // drop menu hide and show for desktop
            $(this).children(".header-drop-menu").toggleClass("show-drop-menu-hover");
        });

    /* search input hide and show when search icon is pressed */
    $("#search-icon-container span").click(function() {
        $(this).toggleClass("fa-times");

        $searchInputContainer.fadeToggle("fast");
    });

    /* mobile navigation */
    /* show mobile tabs when toggle nav mobile button is clicked and when browser width is      over 990px */
    /* toggle mobile navigation when nav button is clicked */
    var $navTabsList = $("#nav-tabs-list");
    var $toggleMobileNav = $("#toggle-mobile-nav");
    var $headerDropMenu = $('.header-drop-menu');

    $toggleMobileNav.click(function() {
        $navTabsList.slideToggle();

        $toggleMobileNav.toggleClass("toggle-mobile-nav-clicked");
    });

    $(window).resize(function() {
        browserWidth = $(window).width();

        if (browserWidth &gt; 990 &amp;&amp; $navTabsList.is(':hidden')) {
            $navTabsList.show();
        }

        fadeMobile();
    });

    $('li', $navTabsList).click(function() {
        if ($(window).width() &lt;= 990) {
            $navTabsList.slideUp();
        }
    });

    /* always show drop menu when on mobile version (when browser width is below 960px) */
    fadeMobile();  

    function fadeMobile(browserWidth) {
        if (browserWidth &lt; 990) { 
            if ($navTabsList.is(':visible')) {
                $navTabsList.hide();
            }

            if ($headerDropMenu.is(':hidden')) {
                $headerDropMenu.show(); 
            }

            if ($toggleMobileNav.hasClass('toggle-mobile-nav-clicked')) {
                $toggleMobileNav.removeClass("toggle-mobile-nav-clicked");
            }
        }
    }

});