WordPress.org

Forums

Arcade Basic
[resolved] Drop down Menu (8 posts)

  1. living4lifeministries
    Member
    Posted 1 year ago #

    I am brand new to the whole wordpress thing. I'm trying to create a drop down menu using the menus option in the arcade theme. I have it pretty much set up, but on my actual website it won't let me click on the drop down part. How do I fix this?

  2. living4lifeministries
    Member
    Posted 1 year ago #

  3. James Revillini
    Member
    Posted 1 year ago #

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

  4. James Revillini
    Member
    Posted 1 year ago #

    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.

  5. James Revillini
    Member
    Posted 1 year ago #

    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.

  6. James Revillini
    Member
    Posted 1 year ago #

    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.

  7. robinthompson62
    Member
    Posted 1 year ago #

    living4lifeministries....I love your site! This is somewhat the form I want to use for my http://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!

  8. living4lifeministries
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags