mybooking-es / mybooking

Mybooking WordPress Theme
GNU General Public License v2.0
1 stars 0 forks source link

3rd level menus not working #12

Closed cranca closed 4 years ago

cranca commented 4 years ago

When you add a 3rd level menu on WordPress it does not appears anywhere. It seem to be a Bootstrap restriction and the class WP Bootstrap Navwalker doesn't manage this.

https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/115 https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/176

Some walkarounds: https://wordpress.stackexchange.com/questions/240219/nav-walker-bootstrap-display-3rd-level-items-under-2nd-level https://stackoverflow.com/questions/51398685/bootstrap-4-navwalker-multilevel-menu

cranca commented 4 years ago

I found a solution.

In line 192 of class-wp-bootstrap-navwalker.php changed this:

if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {

by this:

if ( isset( $args->has_children ) && $args->has_children && $args->depth !== 1 ) {

Then added the following CSS:

// Third level
ul.dropdown-menu li > ul.dropdown-menu {
    width: 100%;
    top: 25px;
    margin: 0;
    color: #212529;
    background-color: #fff;
    border: 0;
}

ul.dropdown-menu li:hover > ul.dropdown-menu,
ul.dropdown-menu li:focus > ul.dropdown-menu,
ul.dropdown-menu li > ul.dropdown-menu:hover,
ul.dropdown-menu li > ul.dropdown-menu:focus, {
    display: block
}

and to control behaviour on mobile devices, added this to custom-javascript.js:

// Controls open submenu on mobile devices
$(document).on('click', '.dropdown-menu li', function (e) {
  $('.dropdown-menu li > .dropdown-menu').slide();
  e.stopPropagation();
});

Then changed depth value on mybooking-navigation-walker.php to 3 and it worked.