Make parent menu clickable
Solution 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.
Solution 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>
user3222864
Updated on June 05, 2022Comments
-
user3222864 almost 2 years
Is there a way to make the top level menu items clickable while still having the dropdowns show up?
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
-
user3222864 about 10 yearsI have added the header.php code for nav. I can't see the above to edit it.
-
danwarfel about 10 yearsThe php isn't doing that. Open dev tools and inspect the element you want to be clickable. It has an anchor tag around it with a href value of "#". The "default action" of the anchor tag is being prevented however b/c it has a data-toggle="dropdown" attribute applied to it. You would have to remove that data-attribute. If you can't do it directly in the code, and you can't modify it via your php (doesn't appear to be the case), then as a final resort you could use JS/jQuery to target $('a.dropdown-toggle[data-toggle="dropdown"]')
-
Omar Abdirahman over 8 yearsIs it possible to accept my own answer? If so, please let me know how!
-
Kiran Dash over 8 yearsThanks a lot. helped a lot
-
Rh Jov over 7 yearsThanks a lot, this is awesome
-
Ivan Topić over 7 yearsThis is great, it works on iphone but not on android? dropdown menu appears but the clickable item link will instantly start to load