Submenu - Menu Issues

1

Menu items do not work properly with submenus

  1. When I add a submenu item, the main menu item becomes an unclickable link, and rather just works as a point of focus for the submenu to appear.

  2. I can’t seem to add a submenu to a submenu. For example, if I add ‘About’ as the main menu item, then ‘People’ as a submenu, then ‘Ryan’ as a submenu under ‘People’ -> the ‘People’ menu item doesn’t appear. The ‘about’ becomes unclickable when I add the ‘People’ submenu.

2
  1. That’s how Bootstrap nav menu parents work. See here and here.
  2. The menu depth is a setting within nav.php: https://github.com/roots/roots/blob/master/lib/nav.php#L84.
3

Hi, Thanks for your reply. I will take a look at the menu depth setting and change that. However, I don’t think you understand the issue with my menu.

If I have ‘about’ in the menu, this will link to /about

However, when I make this a parent menu, it doesn’t let me click on it to send me to the link. I have changed the menu to work on hover, but this does not solve the issue.

Any ideas?

Much appreciated. Ryan.

5

I do understand your issue, but since Roots is based on Bootstrap and that’s not how Bootstrap nav menu links work, I recommend you look into the Roots Nav Walker a bit more or do a Google search.

6

hi, this is my solution.
in the line 44 of lib/nav.php i add

    if ($element->is_dropdown) {
    if($depth > 0) {
        $element->classes[] = 'dropdown-submenu';
    }
    else {
        $element->classes[] = 'dropdown';
    }
}

in the same file, line 84

    $roots_nav_menu_args['depth'] = 3;

this is the css

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

.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}

i hope to help you.