The Bootstrap
[resolved] Top Level Menu Navigation (7 posts)

  1. bruce214
    Posted 3 years ago #

    I'm reviewing your theme – great work!

    Forgive my stupidity, but I can’t find a way to get the top level menu to go to the page it links to. In the “customizer” it goes to the page it links to when you click on it, but otherwise (live view) it only displays its children. I don’t understand the difference. Any help is appreciated.


  2. Konstantin Obenland
    Code Wizard
    Theme Author

    Posted 3 years ago #

    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,

  3. bruce214
    Posted 3 years ago #

    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.


  4. brianlmerritt
    Posted 3 years ago #

    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.


    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>


    <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 ;-)

  5. brianlmerritt
    Posted 3 years ago #

    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.

  6. brianlmerritt
    Posted 3 years ago #

    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"' : '';


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

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

  7. brianlmerritt
    Posted 3 years ago #

    Ignore the <h3> bit ;-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic