Make parent menu clickable

Question

Is there a way to make the top level menu items clickable while still having the dropdowns show up?

see website

I am using bootstrap 3 on my Wordpress site using these instructions: http://www.creativewebdesign.ro/en/blog/wordpress/create-a-responsive-wordpress-theme-with-bootstrap-3-header-and-footer/

header.php

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse menu_left',
                'menu_class'        => 'nav navbar-nav menu_left_middle',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

        <?php
            wp_nav_menu( array(
                'menu'              => 'submenu',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse menu_right',
                'menu_class'        => 'nav navbar-nav menu_right_middle',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

</nav>

Thanks

Answer 1

For me it worked this way: I assume you make usage of the wp-bootstrap-navwalker

Open up the wp-bootstrap-navwalker.php with your editor and look up for line approx. 83

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Change this piece of code to:

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
   //$atts['data-toggle']   = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Note: $att['href'] is enabled now, the the $atts['data-toggle'] is disabled which makes the parent link clickable.

Now open up your style.css and add this piece of code to activate the hover function for your WordPress menu with dropdown and clickable parent.

.dropdown:hover .dropdown-menu {
    display: block;
}

Note: The behaviour of the menu will change slightly on small devices with small screens. No additional jQuery required.

Answer 2

You can just add class 'disabled' into that element using jQuery. See example below:

<script>
     jQuery(document).ready(function() {

           jQuery('ul li > a.dropdown-toggle').addClass('disabled');
    });

</script>

Answer 3

Sure – for each of the top-level anchors, make sure to define your href and remove the data-toggle attribute. For example, instead of:

<a title="Design" href="#" data-toggle="dropdown" class="dropdown-toggle">Design <span class="caret"></span></a>

Use:

<a title="Design" href="/design" class="dropdown-toggle">Design <span class="caret"></span></a>

(or whatever you want the href to be).