Support for multi-level/sub-navbar?

[g12mcgov]

Hi There,

I'm a little confused as to how it maps menu items to buttons on the Bootstrap Navbar. I'm attempting to use a sub-navbar like this, but obviously styled and suited to my needs.

However, how I do it to link those additional buttons in the second-level navbar to my menu items? Or is this even possible?

Thanks.

[ghost]

From my experience, you will either want to create a second menu in wordpress (and functions.php) and add those items to that second menu. If they are a drop down type menu, make sure you extend the depth in your theme file where you are calling the nav_walker:

'depth' => 3,

[PlanBrewski]

WP-Bootstrap-Navwalker respects the choices of the Bootstrap team and is
limited to a single level drop down.

On Thu, Jun 25, 2015, 1:15 PM Jonny Stalnaker notifications@github.com
wrote:

From my experience, you will either want to create a second menu in
wordpress (and functions.php) and add those items to that second menu. If
they are a drop down type menu, make sure you extend the depth in your
theme file where you are calling the nav_walker:

'depth' => 3,

—
Reply to this email directly or view it on GitHub
#176 (comment)
.

[mahassan]

That's sad, it only let you open depth of 2, it would be good if it's at least 3 or show us, how to?

[pattonwebz]

Hey Ammar,

The inability to have 2 level dropdowns is not strictly enforced by the walker. If you set it to a depth of 3 then look at the markup it outputs you will see the 2nd drop down links inside a container.

The limitation is imposed by bootstrap and is due to there being no CSS or JS to apply styles or functions on the 2nd dropdown.

If you produced the required css and js then I would happily help you modify the walker to output the needed markup but the CSS and JS is outwith the scope of the actual walker.

Sent from TypeMail

On 15:47, 7 Aug 2015, at 15:47, Ammar Hassan notifications@github.com wrote:

That's sad, it only let you open depth of 2, it would be good if it's
at least 3 or show us, how to?

---

Reply to this email directly or view it on GitHub:
#176 (comment)

[ghost]

Styling would be much easier if a level depth class was added.

[pattonwebz]

OK so I tested this and discovered that even if all the required markup is output to make a 2nd level dropdown appear (using a slightly modified walker and $depth set to 3 in the call) the main problem is that the Bootstrap JS opens the second dropdown but at the same time closes the first - meaning that although the second is technically open you cannot see it. Anytime you click on anything except the currently '.open' class it closes whatever it had open.

Someone would need to write a function to override the behavior of Bootstrap in this situation so that it kept the parent dropdown open while the child was opened - but still closed both if someone were co click outside of either the current .open a child of it.

@steamsynthetic would it be sufficient to add a depth class to only the dropdown container? IE:

<li id="menu-item-1331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1331 dropdown">
    <a title="Top level" href="#" data-toggle="dropdown" class="dropdown-toggle">Top level <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu depth-1">
        <li id="menu-item-1330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1330 dropdown">
            <a title="second level" href="#" data-toggle="dropdown" class="dropdown-toggle">second level <span class="caret"></span></a>
            <ul role="menu" class=" dropdown-menu depth-2">
                <li id="menu-item-2501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2501">
                    <a title="third level" href="http://www.domain.com/">PageSpeed Testing Tool</a>
                </li>
            </ul>
        </li>
    </ul>
</li>

Lines 3 and 6 above have depth classes added

[ghost]

Yeah. That would work. I was able to solve my issue with this using some CSS

My structure is like this:

Nav Item <-Top Level
Nav Item
Nav Item
-Drop Down <-2nd Level
-Sub Item #1
-Drop Down Menu <-3rd Level
-3rd Level Sub Item
-3rd Level Sub Item
-3rd Level Sub Item
-Sub Item #2
-Drop Down Menu <-3rd level
-3rd Level Sub Item
-3rd Level Sub Item
-3rd Level Sub Item
Nav Item
Nav Item

In my build, Both sub items for level 2 show side by side, and then the 3rd level stay open underneath. It was for organization for two product titles with their subcategories showing underneath.

Sorry for the crass outlines.

This image sort of demonstrates what I did.
-Top nav is first level
-Yellow is second level first dropdown that encases all items
-Red is the sub items from the first drop down that each contain their own drop down
-Blue is the drop downs at the 3rd level underneath the red items

I used a custom class in the wordpress navigation menu to target just this menu item.
Then gave the drop down at the first level a width (in my case 400px)
Then gave the first level drop down sub items a width of 50% and floated them left.
Then gave their drop downs a reset back to 100%, as well as the drop down submenu items.

Its doable, it would just be a lot easier to code into css (im using Sass) if the navigation spat out a depth level to work off of.

[pattonwebz]

@steamsynthetic I'm going to open a fresh issue for this as what you and I are discussing is not truly a solution to what the OP needs for their specific problem. Also it's completely outwith the scope of the navwalker since we don't enqueue any custom css or js or intend to override Bootstrap in any way and feel that should be mentioned and explained in the opening of a new ticket.

[mahassan]

@pattonwebz just wondering, which depth should i change, as there are a lot of depth variable, and this php seems pretty advance to me

[pattonwebz]

Hey @mahassan,

Sorry for delays in getting back to you, I missed the notification for you commenting last time.

The depth variable I mention to change is the one that is passed to the wp_nav_menu() call that is placed in your theme files (not anything directly inside the walker class). It's the one that you can see an example of in the README.md file.

[mahassan]

@pattonwebz Notify aren't working. I had to search for the thread to reply you back. My depth is 3, but it doesn't seem to work at all. Are you sure it is that part and not any other, as i seem in other post. It not spouse to go beyond level 2, as bootstrap in designed.

[pattonwebz]

@mahassan yeah notify wasn't working for me either for some time. I got the mention notify though.

Correct about not supposed to go over 2 (there are some issues when you do) but you can make it work.

I'm on mobile just now but once I'm at a proper desktop I'll take another look through here and see how I could help you sort it how you need it to work :)

[mahassan]

@pattonwebz cheers mate. I will look forward to you reply.

[rustanacexd]

+1 for this please

[ljohnso16]

+1

[CeeRoo]

+1

[BrandonKnudsen]

+1

[N3m3]

+1

[jcgaudette]

+1

[dekkeng]

+1

[georgewrmarshall]

+1

[alihancofficial]

Changing this lines on navwalker php code
if ( $args->has_children && $depth === 0){ $class_names .= ' dropdown'; } elseif($args->has_children && $depth > 0){ $class_names .= ' dropdown-submenu'; }
and than adding some css codes for submenu
.header .nav .dropdown-submenu { position: relative; } .header .nav .dropdown-submenu > a:after{ content: '\e258'; font-family: 'Glyphicons Halflings'; position: absolute; right: 10px; } .header .nav .dropdown-submenu .dropdown-menu { display: none; top: 0; left: 100%; padding-top: 0!important; padding-bottom: 0!important; }

will fixed it for me.

sources:
http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/
http://stackoverflow.com/questions/28247321/bootstrap-nav-walker-add-class-to-child-ul-multi-level-menu

Hope this helps

[dominik90]

@azizce In my case work well when I add this option
if ( $args->has_children && $depth > 0) $class_names .= ' dropdown-submenu';

This lines are not necessary
if ( $args->has_children && $depth === 0){ $class_names .= ' dropdown'; } elseif($args->has_children && $depth > 0){ $class_names .= ' dropdown-submenu'; }

CSS cod is good

[pattonwebz]

The current walker does not support multiple levels of dropdown and neither does Bootstrap core. We may look at adding this in the future but I do not think it will be supported in a BS3 version of the navwalker and as such I am closing this issue for now.

There are other threads still open about multi-level support. I encourage you to visit those and express that is what you would like implemented.

[blanginoe]

I have solved the problem adding

[bmango]

Just in case this helps anyone I got a 3 level menu to work (tested on v4.0.1) by:

Changing the depth from 2 to 3 in the call to wp_nav_menu:

<?php wp_nav_menu(
					array(
						'theme_location'  => 'primary',
						'container_class' => 'collapse navbar-collapse',
						'container_id'    => 'navbarNavDropdown',
						'menu_class'      => 'navbar-nav mr-auto',
						'fallback_cb'     => '',
						'menu_id'         => 'main-menu',
						'depth'           => 3,
						'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
					)
				); ?>

and then adding the following jquery (which I adapted from an answer at Bootstrap 4: Multilevel Dropdown Inside Navigation):

    $('.dropdown-menu > li > a').on("click", function(e) {
        var submenu = $(this);
        $('.dropdown-menu .dropdown-menu').removeClass('show');
        submenu.next('.dropdown-menu').addClass('show');
        e.stopPropagation();
    });

    $('.dropdown').on("hidden.bs.dropdown", function() {
        // hide any open menus when parent closes
        $('.dropdown-menu.show').removeClass('show');
    });

and finally positioning using the css (you may want to adjust using a media query to not apply to mobiles):

.dropdown-menu {
   position: relative;
}

.dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

[ssmason]

HI there
using boostrap nav walker
We have a primary navigation with 2 links having submenus,
When we click on a submenu item , the other submenu briefly displays before the link is executed.
Can any one assist or explain why this is happening..?

[shomonrobie]

I have the same problem.