WordPress

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2573
    tester
    Participant

    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?

    #2574
    admin
    Keymaster

    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.

    #2576
    admin
    Keymaster

    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!

    #2614
    sleeper
    Participant

    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?

    #2615
    sleeper
    Participant

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

    #2618
    admin
    Keymaster

    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

    #2844
    tainguyen
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?