Why is the correct recalculation not happening when loading?

Question

JavaScript

JSFiddle
There is a navigation bar:

<div class="bottom-line">
        <div class="container-fluid">
            <div class="row align-items-center">
                <!-- BEGIN MAIN NAV -->
                <div class="col-sm-8 col-md-9">
                    <nav class="navbar navbar-light navbar-expand-sm">
                        <div class="navbar-collapse offcanvas-collapse float-sm-left">
                            <div class="d-flex flex-row justify-content-between align-items-center py-2 d-sm-none">
                                <div>
                                    <small class="text-muted text-uppercase">г.Москва</small>
                                    <br>
                                    <small class="text-primary text-uppercase">Первый официальный маркет
                                        <br> электротранспорта
                                    </small>
                                </div>
                                <!-- close nav button -->
                                <div>
                                    <button type="button"
                                            class="navbar-close navbar-toggler text-primary p-0 border-0"
                                            data-toggle="offcanvas">
                                        <i class="icon icon-close"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- BEGIN NAV -->
                            <ul class="navbar-nav mr-auto">
                                <!-- catalog list -->
                                <li class="nav-item nav-item-main dropdown position-relative mr-sm-2">
                                    <!-- only icon -->
                                    <button type="button"
                                            class="navbar-toggler border-0 d-none d-sm-inline-flex float-left">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <a href="#" class="nav-link float-left" id="catalogList"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог
                                        <span class="d-sm-none">товаров</span></a>
                                    <div class="dropdown-menu shadow-none py-sm-4 bg-light"
                                         aria-labelledby="catalogList">
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Моноколеса</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Гироскутеры</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Электросамокат</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Электровелосипеды</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Сигвеи</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Электроскутеры</a>
                                        <a href="#" class="dropdown-item py-sm-3 px-lg-4">Аксессуары</a>
                                    </div>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Акции</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Доставка</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Поддержка</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Обзоры</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Сертификаты</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Возврат и обмен</a>
                                </li>
                                <li class="nav-item nav-item-static">
                                    <a class="nav-link" href="#">Сервис</a>
                                </li>
                                <!-- more list -->
                                <li class="nav-item nav-item-more dropdown d-none">
                                    <a href="#" class="nav-link dropdown-toggle" id="moreList"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ещё</a>
                                    <div class="dropdown-menu" aria-labelledby="moreList">
                                        <a class="dropdown-item d-none" href="#">Акции</a>
                                        <a class="dropdown-item d-none" href="#">Доставка</a>
                                        <a class="dropdown-item d-none" href="#">Поддержка</a>
                                        <a class="dropdown-item d-none" href="#">Обзоры</a>
                                        <a class="dropdown-item d-none" href="#">Сертификаты</a>
                                        <a class="dropdown-item d-none" href="#">Возврат и обмен</a>
                                        <a class="dropdown-item d-none" href="#">Сервис</a>
                                    </div>
                                </li>
                            </ul>
                            <!-- END NAV -->
                        </div>
                    </nav>
                </div>
                <!-- END MAIN NAV -->
                <!-- BEGIN TEXT INFO -->
                <div class="col-sm-4 col-md-3 d-none d-sm-block text-muted">
                    <div class="info-text d-sm-flex flex-column float-right">
                        <small class="d-sm-block font-weight-light">часы работы шоу-рума:
                            <span class="font-weight-normal">10:00-21:00</span>
                        </small>
                        <small class="d-sm-block font-weight-light">сервис центр:
                            <span class="font-weight-normal">10:00-18:00</span>
                        </small>
                        <small class="d-sm-block font-weight-light">приём заявок на сайте:
                            <span class="text-primary">круглосуточно</span>
                        </small>
                    </div>
                </div>
                <!-- END TEXT INFO -->
            </div>
        </div>
    </div>

jquery function:

let recountNavItems = () => {
    let navCatalog = $('.navbar-nav');
    let mainMenu = navCatalog.find('.nav-item-main');
    let staticItems = navCatalog.find('.nav-item-static');
    let moreItems = navCatalog.find('.nav-item-more');
    let staticItemsMore = moreItems.find('.dropdown-item');
    let rightInfoBox = $('.bottom-line').find('.info-text');
    let hiddenClass = 'd-none';

    let staticItemsMaxWidth = navCatalog.outerWidth(true) -
        mainMenu.outerWidth(true) -
        moreItems.outerWidth(true) - rightInfoBox.outerHeight(true) - 20;
    let widthStaticItems = 0;
    let hiddenIndex = false;
    let hasMore = true;

    console.log(staticItemsMaxWidth);

    $.each(staticItems, (i, item) => {
      $(item).removeClass(hiddenClass);
      widthStaticItems += $(item).outerWidth();

      if (widthStaticItems >= staticItemsMaxWidth && window.matchMedia('(min-width: 768px)').matches) {
        if (hiddenIndex === false) hiddenIndex = i;
        $(item).addClass(hiddenClass);
      }
    });

    $.each(staticItemsMore, (i, item) => {
      hasMore = $(item).not('.' + hiddenClass).length > 0;

      ((hiddenIndex === false) || (i < hiddenIndex)) ?
          $(item).addClass(hiddenClass) :
          $(item).removeClass(hiddenClass);
    });

    hasMore ?
        $(moreItems).removeClass(hiddenClass) :
        $(moreItems).addClass(hiddenClass);
  };

recountNavItems();

$(window).resize(() => recountNavItems());

The function hides/displays menu items depending on the size of the panel, extra items are displayed in the "more" drop-down list, if all items are displayed in the panel, the "more" item is hidden.
When the page is loaded, the function is called, but the recalculation does not occur correctly, only after the window is resized, i.e. after calling the "resize" event
Tell me what's the problem? Why is it not recalculated correctly when the page is loaded?
JSFiddle

Answer 1

if you call
recountNavItems();
countNavItems();
then it works