[Theme: The Bootstrap] Top Level Menu Navigation

Hi Bruce,

thank you for your feedback, I was not aware of the issue.

Bootstrap, by default, lets you not navigate to the top-level menu-item (even though this would be desired behavior for many users).
I opened a ticket for the Customizer issue and will see that I get around to it for the next version.

Thank you,
Konstantin

Konstantin,
Yes, I’m aware of the Bootstrap default behavior, it just doesn’t make sense to me when used within WordPress (wp_nav_menu). Thanks for getting back to me. I’ve learned from your theme and appreciate your work.

Bruce

There is an interesting discussion on stackoverflow which describes how to change the default behaviour of the bootstrap navbar so that you can get dropdown on hover, rather than having to click.

https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

CSS to change the menu to drop on hover, rather than just on click is:

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

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

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

And to be able to click on the Parent (dropdown) menu link, you need to remove the

class=”dropdown-toggle” data-toggle=”dropdown”

From each parent LI

In other words:

<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown2 <b class="caret"></b></a>

becomes

<a href="#">Dropdown2 <b class="caret"></b></a>

The bootstrap default is not to do this, but this makes no sense in a WordPress environment Konstantin. Do you fancy an extra config setting for the menus ??

Ps – I seem to have messed up the link to the stackoverflow site, but if you click on any of the blue text, it will take you to the discussion.

I have tested this in The Bootstrap theme and by adding the above CSS to style.min and changing the php of “inc/nav-menu-walker” line 47 (make sure your line matches the one below before modifying) from:

$attributes .= $args->has_children ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

to

$attributes .= $args->has_children ? '' : '';

<h3>congratulations – you now have a fully working Menu system in WordPress AND an awesome theme</h3/

Ignore the <h3> bit ??