1

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.

Here is the staging site: http://volocommerce.staging.wpengine.com/

However, this is the code I'm using:

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


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="navbar navbar-default navbar-fixed-top">
              <div class="container">

                <div id="" class="">
         <?php 
        //$walker = new Menu_With_Description;

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

  )); ?>
                </div>
            </div>

         </div>
         </div>

 </nav>

And here is the script for the mobile menu/scroll menu:

     <script>
  $(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() > 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() < 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'); 
  } 
});
</script>

What I'm trying to stop occurring is this, which happens everytime the page is loading - and it's very frustrating: Jumping Menu

I've since tried using jQuery to hide the elements on page load, then remove the hide class once the page load is complete - this failed too :(

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

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

2 Answers 2

0

I'm guessing this is a css loading issue. The website loads all the resources before loading the style sheet that hides your sub menus (in your case dropdowns.less). Enqueuing .less in wordpress is done a bit different than you would enque a normal css stylesheet so you should check this out.

If this is indeed the problem, a simple fix to this that should work, is copying the "display:none" rule in the main style.css:

.dropdown-menu { display: none; }

Let me know if this works

2
  • Hey @FelixSima - thanks for taking the time to reply. I had already tried that in the stylesheet, but without success. I've actually gone and tried it directly in the header.php (as close to the top as possible) without any success :( - But thanks for trying! Appreciate it! Aug 8, 2016 at 9:44
  • It does seem to be a CSS issue though :\ Aug 8, 2016 at 9:45
0

I spent some time improving the code on the site - this was the issue:

Remove

<script src="/wp-content/themes/volo/js/jquery.min.js" type="text/javascript"></script> 

from line 55 of the header, move it to the top - still wasn't 100% and it still jumped a bit...

Review the javascript file - see it was an ancient version so use the CDN version (quicker load times too)

Add

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 

to line 3 of "header.php"

Then add this bit of CSS & jQuery at the top of "Header.php"

<script>
$(document).on("pagecontainerbeforeload",function(){
$('.sub-menu').addClass('hidden-element');
$(document).on("pageload",function(){
$('.sub-menu').removeClass('hidden-element');
});
</script>
<style>
.sub-menu {display:none;}
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.