Make Top-Level Menu Items Clickable

Mauer Themes Support Storyteller Make Top-Level Menu Items Clickable

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Paul 2 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #614

    johnnycho
    Participant

    I know that the default behavior in Bootstrap is to make the top-level menu items NOT clickable so they can be used to open submenus in mobile, and I know there’s a whole debate about this topic. But my client is requesting that the top-level menu items be clickable (i.e. clicking on it should take the user to the relevant page). Is there a hook or something I can add to functions.php in a child theme to allow top-level menu items be clickable? Thank you.

    #624

    Paul
    Keymaster

    Hello Johny.

    To customize this behavior you’d need to:
    1. Enqueue something similar in your child theme: http://bit.ly/2jCcL2Q
    2. Make sure the parent link has a href with the actual URL, not the hash (should probably dive into the wp_bootstrap_navwalker class).
    3. Use CSS to show dropdown on parent hover.

    Hope that helps.

    #625

    johnnycho
    Participant

    Thanks Paul. I actually tried all three of those things. #3 works fine. The problem with #1 is, WordPress includes my enqueued scripts BEFORE including Bootstrap.js, so any jQuery I use to modify Bootstrap behavior gets overridden by Bootstrap.js. Unless I’m doing something wrong?

    As for #2, I tried the following in my child theme functions.php file:

    function removeBootstrapDropDownDataToggle($atts, $item, $args) {
    $atts[‘href’] = ! empty( $item->url ) ? $item->url : ”;
    $atts[‘data-toggle’] = null;
    $atts[‘class’] = null;
    $atts[‘aria-haspopup’] = null;
    return $atts;
    }

    apply_filters( ‘nav_menu_link_attributes’, ‘removeBootstrapDropDownDataToggle’, $atts, $item, $args );

    Is that incorrect?

    #627

    Paul
    Keymaster

    As for the order in which the scripts are loaded, you can change it. Try controlling it by setting dependencies in wp_enqueue_script() and/or setting the priorities in add_action().

    As for the function you posted, I still think you need to override the wp_bootstrap_navwalker class in your child theme.

    If you’re not particularly sure if you have the skills to do that, you could contract an expert on Codeable.io to bring this customization to life. Please mind that customizations are not part of the support according to the official ThemeForest policy.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Make Top-Level Menu Items Clickable’ is closed to new replies.