WordPress

[tester]

I am looking for the simplest way to have bootstrap with SmartMenus work with WordPress. I have used navwalker to hook bootstrap to WordPress. Is this your recommendation?

[admin]

There is no “official” recommended way of using Bootstrap + SmartMenus in WordPress at the moment so I have taken a note to think about this and maybe add a tutorial in the docs.

But to try to help you out right now, to be honest, I am not familiar with this class (if this is it – https://github.com/twittem/wp-bootstrap-navwalker) but at first glance it does look good and simple to use. So I will spend some time testing this tomorrow morning and will let you know if it’s fine to use it. The only issue might be that the SmartMenus Bootstrap addon requires just slightly different HTML code from the default Bootstrap navbar code but, hopefully, it will be possible to modify the code the navwalker class outputs in the proper way.

[admin]

OK, just got the chance to test it. It looks great in general and needed just few minor tweaks to output proper HTML code for use with SmartMenus jQuery + Bootstrap addon. I did the changes so just get the updated version from here (apart from those changes it’s identical to the original code):

https://github.com/vadikom/wp-bootstrap-navwalker

The only other thing you may need to tweak is the depth parameter if you have more sub menu levels – e.g.:

wp_nav_menu( array(
	'menu'              => 'primary',
	'theme_location'    => 'primary',
	'depth'             => 3,
	// ...

Cheers!

[sleeper]

Unless I’m missing something, this fix (modifying depth) does not show the icon in the sub-menus nested more than 1 level deep.

In WordPress, I am using wp-bootstrap-navwalker and creating a menu like so…

wp_nav_menu( array(
	'menu'            => 'main-nav',
	'theme_location'  => 'main-nav',
	'container'       => 'div',
	'depth'             => 3,
	'container_class' => 'collapse navbar-collapse',
	'container_id'    => 'bs-example-navbar-collapse-1',
	'menu_class'      => 'nav navbar-nav',
  'walker'            => new wp_bootstrap_navwalker()
  )
);

There are a number of issues:

1. The second-level icon (+) is not showing.

2. Using wp-bootstrap-navwalker when clicking on the li containing the 2nd level dropdown (ul), the first click exposes the nested ul, the second click goes to that page (instead of hiding the ul).

Any ideas?

[sleeper]

Sorry about the code tags. Thought it might also work inline. Cleaned up 😛

[admin]

About 1) – are you sure you are now using the updated version of the “wp-bootstrap-navwalker” class from here:

https://github.com/vadikom/wp-bootstrap-navwalker

This is not the original version of the class but a one I modified to support unlimited sub levels.

About 2) – this is now the default collapsible behavior when using the SmartMenus Bootstrap add-on. A first click on the parent link shows the sub menu. A second click activates the link. Apart from that, the +/- toggle button can be used to toggle the sub menu at any time. This allows you to actually add links to parent items which is not possible in Bootstrap by default.

If you would like to revert to Bootstrap’s default behavior (i.e. use the whole parent item just as a sub menu toggle button), you will need to use the data-sm-skip-collapsible-behavior attribute – here is how to do it:

http://www.smartmenus.org/docs/#data-sm-skip-collapsible-behavior

[tainguyen]

Hello all,
If you using depth = 3:

 
wp_nav_menu( array(
	'menu'            => 'main-nav',
	'theme_location'  => 'main-nav',
	'container'       => 'div',
	'depth'             => 3,
	'container_class' => 'collapse navbar-collapse',
	'container_id'    => 'bs-example-navbar-collapse-1',
	'menu_class'      => 'nav navbar-nav',
  'walker'            => new wp_bootstrap_navwalker()
  )
);

You can monitor file wp_bootstrap_navwalker.php add <span class=”caret”></span>
1. Replace: if ( $args->has_children && $depth === 0 ) { // Line 84
To : if ( $args->has_children && $depth === 0 || $args->has_children && $depth === 1) {
2. Replace: $item_output .= ( $args->has_children && 0 === $depth ) // Line 108
To: $item_output .= ( $args->has_children && 0 === $depth || $args->has_children && 1 === $depth)

======
– If you can’t monitor it. I can help you.
– My skype: nguyenlehuutai90

[Author]

Posts