Navigation Widths not sizing properly in JS

[mscottfowler]

Since the script is finding just 'li" in the document, and I have other 'li's' in my content, the script is reading all of the 'li' elements and sizing accordingly, leaving my navigation hover severely smaller than it should be. I tried putting a class on the li's for the navigation in order to separate this li from the others I have in the content, but it's not working. Any suggestions?

IRT: onInit: function(tab, navigation, index) {

        //check number of tabs and fill the entire row
        var $total = navigation.find('li').length;
        $width = 100 / $total;
        var $wizard = navigation.closest('.wizard-card');

        $display_width = $(document).width();

        if ($display_width < 600 && $total > 3) {
            $width = 50;
        }

        navigation.find('li').css('width', $width + '%');
        $first_li = navigation.find('li:first-child a').html();
        $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
        $('.wizard-card .wizard-navigation').append($moving_div);
        refreshAnimation($wizard, index);
        $('.moving-tab').css('transition', 'transform 0s');
    },

[alexandru-paduraru]

@mscottfowler thank you for pointing that out. Please replace the var $total = navigation.find('li').length; with var $total = navigation.find('.nav li').length; and everywhere where you are counting the li elements with that. In this way the navigation will check only for the li elements that are in the navigation.

Hope this helps.

Best, Alex