WordPress menu jumping around on page load, when calling it via PHP
<p>I'm using a Custom Theme to re-design our website. However, I'm getting an issue where the Menu jumps around and shows all links, before quickly collapsing them under the parent options, in the menu. </p>

<p>Here is the staging site: 
<a href="http://volocommerce.staging.wpengine.com/" rel="nofollow noreferrer">http://volocommerce.staging.wpengine.com/</a> </p>

<p>However, this is the code I'm using:</p>

<pre><code>            &lt;nav class="navbar navbar-default" role="navigation"&gt;
              &lt;div class="container-fluid"&gt;
                &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                    &lt;span class="icon-bar bar-1"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar bar-2"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar bar-3"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;/div&gt;


            &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;div class="container"&gt;

                &lt;div id="" class=""&gt;
         &lt;?php 
        //$walker = new Menu_With_Description;

         wp_nav_menu (array ('theme_location' =&gt; 'header_menu', 
                                  'container'       =&gt; 'div', 
                                  'container_class' =&gt; '', 
                                  'container_id'    =&gt; '',
                                  'menu_class'      =&gt; 'menu', 
                                  'menu_id'         =&gt; '',
                                  'echo'            =&gt; true,
                                  'fallback_cb'     =&gt; 'wp_page_menu',
                                  'before'          =&gt; '',
                                  'after'           =&gt; '',
                                  'link_before'     =&gt; '',
                                  'link_after'      =&gt; '',
                                  'items_wrap'      =&gt; '&lt;ul class="nav navbar-nav top_items"&gt;%3$s&lt;/ul&gt;',
                                  'depth'           =&gt; 0,
                                  //'walker'          =&gt; $walker,

  )); ?&gt;
                &lt;/div&gt;
            &lt;/div&gt;

         &lt;/div&gt;
         &lt;/div&gt;

 &lt;/nav&gt;
</code></pre>

<p>And here is the script for the mobile menu/scroll menu:</p>

<pre><code>     &lt;script&gt;
  $(function(){
    $('.navbar ul li:has(ul)').addClass('dropdown');
    $('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul li:has(div)').addClass('yamm-content');
    $('.navbar .lang_drop ul li ul:has(li)').addClass('single_drop');
    $('.navbar .lang_drop ul li:has(ul)').removeClass('');
//yamm-fw
    $('.dropdown:has(a)').addClass('dropdown-toggle');

    $('.more_menu').addClass('yamm-fw');

});


$(window).scroll(function(e){ 
  $el = $('.head_con'); 
  if ($(this).scrollTop() &gt; 150 ){ 
    $('.head_con').addClass('head_con_scroll'); 
    $('.logo_con').addClass('logo_con_scroll'); 
    $('.menu-item').addClass('menu-item_scroll'); 
    $('.head_phone_con').addClass('head_phone_con_scroll'); 
    $('.head_call_us').addClass('head_call_us_scroll');
    $('.ceo_message').addClass('ceo_message_scroll');
  }
  if ($(this).scrollTop() &lt; 150 )
  {
    $('.head_con').removeClass('head_con_scroll'); 
    $('.logo_con').removeClass('logo_con_scroll'); 
    $('.menu-item').removeClass('menu-item_scroll'); 
    $('.head_phone_con').removeClass('head_phone_con_scroll'); 
    $('.head_call_us').removeClass('head_call_us_scroll'); 
    $('.ceo_message').removeClass('ceo_message_scroll'); 
  } 
});
&lt;/script&gt;
</code></pre>

<p>What I'm trying to stop occurring is this, which happens everytime the page is loading - and it's very frustrating:
<a href="https://i.stack.imgur.com/fUuIR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fUuIR.jpg" alt="Jumping Menu"></a></p>

<p>I tried adding this bit of code (using Javascript to hide the element before the page loads, then make it visible by removing the hide class, once the page has loaded). </p>

<pre><code>&lt;script&gt;
$(document).on("pagebeforeload",function(){
    $('.dropdown-menu').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.dropdown-menu').removeClass('hidden-element');
});
&lt;/script&gt;
&lt;style&gt;
.hidden-element {display:none!important;}
&lt;/style&gt;
</code></pre>

<p>Spotted that "pagebeforeload" was depreciated in jQuery 1.4.0 so tried this without success:</p>

<pre><code>&lt;script&gt;
$(document).on("pagecontainerbeforeload",function(){
    $('.dropdown-menu').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.dropdown-menu').removeClass('hidden-element');
});
&lt;/script&gt;
&lt;style&gt;
.hidden-element {display:none!important;}
&lt;/style&gt;
</code></pre>