Drop down Menu

the website is https://www.living4lifeministries.com

Same issue here. Demo site: https://nhs.vandertech.com/

Fixed it by adding some global javascript to the site. i did this by installing the plugin Global Javascript and then adding this:

jQuery( function ( $ ) {
    // ---- FIX DROPDOWN NAV
    var fadeouttimer = 250;
    var ddinduration = 200;
    var ddfadeoutduration = 100;
    $( 'a.dropdown-toggle' ).hover( function () {
        $(this).next( 'ul.dropdown-menu' ).slideDown( ddinduration );
    }, function () {
        var $dd = $(this).next( 'ul.dropdown-menu' );
        $dd.data( 'fadeout', setTimeout( function () { $dd.fadeOut( ddfadeoutduration ); }, fadeouttimer ) );
    } );

    $( 'ul.dropdown-menu' ).hover( function () {
        clearTimeout( $(this).data( 'fadeout' ) );
    }, function () {
        var $dd = $(this);
        $dd.data( 'fadeout', setTimeout( function () { $dd.fadeOut( ddfadeoutduration ); }, fadeouttimer ) );
    });

} );

You also need to check off jQuery as a dependency on the side when adding the script to Global Javascript.

Note: there are arguably better ways to add custom JS to a site, but this is a fast and easy way to get this working. I think the author of the theme simply does not include this functionality in the “basic” version of the theme.

One more thing … I see now that they’re using bootstrap HTML5 attributes to make this work, and that the bootstrap JS is loading, so I’m confused as to why this doesn’t work out of the box. It definitely does something, since it’s adding the dropdown icon and not letting the click of the main menu item go anywhere. It’s strange.

OK, figured this out for real this time. The way to get this working the way it should be is to load the following JS code:

jQuery( function ( $ ) {
    $('.dropdown-toggle').dropdown();
} );

My code posted earlier is still relevant … it’s actually a little fancier because it uses transitions, but this is obviously more succinct and utilizes the data attributes the way they were intended.

Either use the code in this post or the code in the prior post.

living4lifeministries….I love your site! This is somewhat the form I want to use for my https://www.treasureourchildren.org If you don’t mind me asking…how did you do the header with the email on the left and the other on the right. Also have a few other questions but do not want to burden you. Thanks for any help!

I am no longer using the arcade theme. Thank you for your support though ??