X

Activate Parent Item Link on Twitter Bootstrap Dropdown navwalker

Hi Folks, it’s being long time i’ve started writing again. From now I will try to write regularly with Solutions of Problems. Today I’m writing about Activate and Hover on Parent Items of Bootstrap’s Dropdown Navwalker Class. The solution is very easy but nowhere addressed clearly. That’s why I’m writing this Tuts. Hopefully it will help you.

Few days ago Our latest WordPress Theme Foody – Responsive Food, Recipe Restaurant/Cafe WordPress Theme was soft Rejected by ThemeForest. The Reason’s were:

       

      As we Develop all our WordPress and HTML5 Templates with Bootstrap Framework. When we convert any HTML5 Templates to WordPress we always use “WP Bootstrap Navwalker” to control the Navigation exactly looks like Bootstrap on HTML5 Templates.

      Github URL: https://github.com/twittem/wp-bootstrap-navwalker

      Honestly I’ve never noticed this Problem before, because Bootstrap works like this. Don’t understand why the Developer of WP Bootstrap Navwalker’s didn’t include this feature. I’ve searched a lot about this Problem. Even the Developer also didn’t any answer on Github Issues. Later on I’ve tried to make a simple solution by myself. And it works like a charm.

      Goto your Theme Folder and Open wp_bootstrap_navwalker.php file on your Favorite Editor, see line#83-91 on my Current Version 2.0.4. The code is like this –

       

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

      Change this code into like this-

      // 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: we’ve changed the $atts[‘href’] which is enabled now and the $atts[‘data-toggle’] is commented to disable which makes the Parent Link Clickable. On Bootstrap’s website they’ve suggested to make the Parent link “#”. We’ve disabled this option.

      One more thing you’ve to do. Open your Stylesheet file and add this piece of code to activate the functionality on Hover WordPress Menu with Dropdown and Parent Item Clickable.

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

       

      We’re all set now. Let’s see how looks our Menu now-

      Backend-

      Frontend-

      Activate Parent Item Link on Twitter Bootstrap Dropdown navwalker
      5 (100%) 1 vote
      Activate Parent Item Link on Twitter Bootstrap Dropdown navwalker was last modified: September 28th, 2016 by Liton Arefin
      Activate Parent Item Link on Twitter Bootstrap Dropdown navwalker was last modified: September 28th, 2016 by Liton Arefin

      This post was last modified on September 28, 2016, 4:50 pm

      Categories: ResourcesTutorials
      Liton Arefin :C.T.O and mastermind behind Jewel Theme. He is Leading a core WordPress Development Team. Extremely Passionate about WordPress. professional experience over 7 years. Cricket lover, Traveler and Movie freak...