nav.js

   $(function () { //this javascript code runes immediatly and not in a document ready
                  // may cause some race conditions
      
         var $xpoNav =   $('.xpo-nav'),
             nodes=      [],
             $moreMenu = $('<li class="xpo-nav-dropdown more-menu"><a href="#" class="xpo-nav-dropdown-toggle" data-toggle="xpo-nav-dropdown" data-target="#">More <i class="xico-ui-arrow-down"></i></a></li>'),
             $nestedUl = $('<ul class="xpo-nav-dropdown-menu"></ul>');
      

         
         toggleLoading();
        
         $xpoNav.find('li').each(function (k) {
            var $this = $(this),
                offset = $this.offset().left,
                width = $this.width();

            nodes.push({
                node: $(this),
                visibleAt: offset + width,
                isCollapsed: false
            });
         });
        
         toggleLoading();

         //is there a reason this is here and not in the adjust nav function?
         var lastVisibleIndex = --nodes.length;

         // adding some css to the xpoNav parent and appending the more menu
         $xpoNav.parents('div:first').css('min-width', '600px');
         //this 
         
         //at this point no items are hidden and we have a more button
         //appended to the nav... intentional? 
         $moreMenu.append($nestedUl);
         $xpoNav.append($moreMenu);


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

         function adjustNav() {
            var collapsePoint = xpoNav.next(),
                collapsePointOffsetLeft = collapsePoint.offset().left - $moreMenu.width();

            // this stuff is rough 
            // try some functions like isNavOffscreen that returns booleans
            if (lastVisibleIndex >= 0 && nodes[lastVisibleIndex].visibleAt > collapsePointOffsetLeft) {
                addToMoreMenu(nodes[lastVisibleIndex].node);
                lastVisibleIndex -= 1;
                adjustNav();
            // more rough if statements not sure what your intent is easily
            } else if (lastVisibleIndex < (nodes.length - 1) && nodes[lastVisibleIndex + 1].visibleAt < collapsePointOffsetLeft) {
                removeFromMoreMenu(nodes[lastVisibleIndex + 1].node);

                if (lastVisibleIndex < (nodes.length - 1)) {
                    //   console.log(lastVisibleIndex);
                    lastVisibleIndex += 1;
                    adjustNav();
                }
            }
         }

        function addToMoreMenu(item) {
            $moreMenu.addClass('visible');
            $moreMenu.find('ul:first').prepend(item);
        }

         function removeFromMoreMenu(item) {
            $(item).insertBefore($moreMenu);

            if ($moreMenu.find('li').length === 0) {
                $moreMenu.removeClass('visible');
            }
         }
        
        function toggleLoading(){
            //since this code runs immediately these should probably be in the dom so it doesn't
            //create a visual flash
            $('.xpo-nav-global').toggleClass('loadingNavWidth');
            $('.right-menu-container').toggleClass('loadingRightDiv');
         }

    });