Dropdowns showing on page load

  • 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:
    https://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:
    Image: https://i.stack.imgur.com/fUuIR.jpg

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to:

    1. In JS, add a class of ‘state-a’ (for example) to the navigation element to indicate the page loading state
    2. In JS, remove that class of ‘state-a’ and add a class of ‘state-b’ when the page has been loaded and all JS applied
    3. Add CSS that :
      – Hides the navigation elements you want in ‘state-a’
      – Shows the navigation elements in ‘state-b’
    Thread Starter McLarenDan

    (@mclarendan)

    HI @andrew Nevins

    I’m not a coding pro, unfortunately… I’ve added this, without result:

    <script>
$(document).on("pagebeforeload",function(){
    $('.navbar ul li:has(ul)').addClass('dropdown-hidden');
	$('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu-hidden');
	$('.navbar ul li ul:has(li)').addClass('dropdown-menu-hidden');
	$('.navbar ul li ul li:has(div)').addClass('yamm-content-hidden');
});

$(document).on("pageload",function(){
    $('.navbar ul li:has(ul)').addClass('dropdown-visible');
	$('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu-visible');
	$('.navbar ul li ul:has(li)').addClass('dropdown-menu-visible');
	$('.navbar ul li ul li:has(div)').addClass('yamm-content-visible');
});
</script>
<style>
.dropdown-hidden {display:none;}
.dropdown-menu-hidden {display:none;}
.yamm-content-hidden {display:none;}
.dropdown-visible {display:inline;}
.dropdown-menu-visible {display:inline;}
.yamm-content-visible {display:inline;}
</style>
    Thread Starter McLarenDan

    (@mclarendan)

    Actually, spotted a mistake – I’ve just added a visible class, after a hidden class *facepalm*

    Here is the updated (still not working) versions:

    <script>
$(document).on("pagebeforeload",function(){
    $('.navbar ul li:has(ul)').addClass('hidden-element');
	$('.navbar navbar-collapse ul:has(li)').addClass('hidden-element');
	$('.navbar ul li ul:has(li)').addClass('hidden-element');
	$('.navbar ul li ul li:has(div)').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.navbar ul li:has(ul)').removeClass('hidden-element');
	$('.navbar navbar-collapse ul:has(li)').removeClass('hidden-element');
	$('.navbar ul li ul:has(li)').removeClass('hidden-element');
	$('.navbar ul li ul li:has(div)').removeClass('hidden-element');
});
</script>
<style>
.hidden-element {display:none!important;}
</style>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First step would be to understand when and why the dropdown is shown at the time that it is.

    Thread Starter McLarenDan

    (@mclarendan)

    I wish I knew why, then I could fix it – it’s very frustrating and I’m pulling my hair out over it.

    Thank you for taking the time to reply btw, it was greatly appreciated.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The easiest thing you can do is remove code bit by bit until you find the origin of the problem

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Or maybe try this:
    – Try hiding the submenu initially on page-load.
    – Then unhiding it at the time that you feel is right

    Thread Starter McLarenDan

    (@mclarendan)

    Seems it’s down to the loading of the javascript jquery.min.js – damnit.

    After not posting the above message, I spent some time improving the code on the site – this was the issue:

    This is all it was:

    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&#8221; 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>

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Dropdowns showing on page load’ is closed to new replies.