Menu – adding subpages inactivates main menu link

Thanks for the kind words, I’d be happy to help.

The dropdown menus follow the convention followed by the Bootstrap CSS framework. As you can see here, the dropdown opens onclick and the parent node is always “#”. That allows touch screen users (such as those on tablets and mobile phones) to utilize the menu by tapping on the parent menu node (since there is no “hover” on touch screens). Also, if the main node took the user away to another URL, the user may not be able to see the menu dropdown options.

Thank you for your timely response. Based on this, the menus should work when they are clicked on, correct? They do not. The links are inactive on the main navigation (the actual links, not the mouseover, making the pages inaccessible). If I am misinterpreting your response, please let me know. How the theme is functioning now is there is no way to successfully have subpages in any section. If you browse to https://oncall.webuntangled.com and try to go to Services & Specialties or Payments & Referrals you will see what I mean.

Again, thank you for your assistance!

Hi there,

It appears one of your plugin: FAQ Responsive uses Bootstrap as well. It might be the cause of conflict. Please try to deactivate the plugin and see if it works.

Let me know how it goes. I hope it helps.

Best,
Jarek
Kale Support

Thank you so much! That fixed the issue!!

Sounds good @khart714, we’d love a review if you have some time ??

• This reply was modified 7 years, 8 months ago by lyrathemes.

Well, this may be the bootstrap convention but I REALLY dislike it! I’ve been designing websites for 20 years and used tons of different dropdown systems. In all cases, I’ve always been able to set URLs for the parent item! It’s the default WordPress behaviour, it’s what desktop users expect and I’m 100% sure I’ll have trouble explaining to my latest client why he can’t get that behaviour on his site. This after I spent 3 days customising your theme, which is otherwise excellent. There’s other ways to allow touch screen users to acces sub-menu items, you don’t need this crazy system, trust me. Please provide a fix so parent items can have a URL assigned!

@webrightnow I am not sure calling the Bootstrap system crazy would help ?? We have this request in our pipeline and will discuss in the team before incorporating this change. Please note, if this is implemented, and if you’re on a mobile phone or touch screen device – you can’t drill down the menus. The main reason we don’t want to modify the default Bootstrap behavior is if someone visits on mobile they couldn’t activate the dropdowns. Unless we create a completely new solution with mobile specific menus…

No don’t get me wrong, I love bootstrap by there’s plenty of other themes that use it without having to lose the parent item URL. As you rightly put it, it’s about implementing mobile-specific menus with different behaviours. Meanwhile there’s a solution here, but so far haven’t gt it to work properly:

https://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/

Or I may have to use a responsive menu plugin. I do hope you consider this change for a future update.

Solved it with this Stackoverflow solution:

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

// 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 : '';
}

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;
}