Неправильная позиция активного элемента JQuery Lava Lamp при загрузке страницы

Question

Я использую эффект лампы Лава в моем меню (эта версия).

Все работает отлично, за исключением загрузки страницы, с другой стороны, когда страница загружается, объект лавовой лампы остается в том положении, в котором он должен быть, НО при наведении курсора на меню он перемещается в нужное место.

Я знаю, что это известная проблема, и из-за времени загрузки пользовательских шрифтов или сценария, я провел широкий спектр исследований по этому вопросу и попробовал почти все найденные решения, чтобы решить эту проблему, но не повезло.

Некоторые решения, которые я нашел: Используйте $(window).load(function(){, Задержка запуска функции лампы Lava и некоторые другие подобные решения, но, как я сказал, ни одно из них не сработало для меня.

Как вы думаете, есть ли это исправить? Я все еще верю, что это не должно быть так сложно, но я собираюсь сдаться через 4 дня.

Рабочий пример можно найти здесь

Ваша помощь будет высоко ценится.

большое спасибо

PS: я не знаю, как заставить JSFiddle сожалеть об этом.

Лава Лампа CSS:

#navlist li.backLava {
border-top: 2px solid #f58220;
text-align: center;
}

Файл Lava Lamp JS можно найти здесь

Структура меню (Bootstrap Menu):

<nav class="bottom-header wow animated delay-1" role="navigation">
      <div class="container" id="bi-to-pad">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#My-nav" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                 <a class="navbar-brand" href="index.html">
                  <img src="assets/img/logo-2.png" class="logo-normal">
                 </a>
            </div>

            <div class="navbar-collapse collapse avbar-expand-lg" id="My-nav" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav navbar-right" id="navlist">

                    <li><a href="#." class="box fo">Home</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services<span class="caret"></span></a>
                         <ul class="dropdown-menu" role="menu">
                          <li class="noLava"><a href="#.">Graphic Design</a></li>
                          <li class="noLava"><a href="#.">Web Design</a></li>
                          <li class="noLava"><a href="#.">SEO</a></li>
                          <li class="noLava"><a href="#.">Printing</a></li>
                         </ul>
                    </li> 

                   <li ><a href="#.">About</a></li>                      
                   <li class="active selectedLava"><a href="#.">Portfolio</a></li>                         
                   <li><a href="#." target="_blank">Blog</a></li> 
                   <li ><a href="#.">Contact</a></li>  
                   <li><a href="#."><i class="fa fa-shopping-cart kechke"></i></a></li>


                </ul>
            </div>

        </div>
     </div>
   </nav>