Troubleshooting help requested

[HallSL]

Hello, I inherited a Drupal site using Bootstrap. It currently has 2 levels of menu, the second is hidden until the first level is clicked, then it displays all the items of the second level in another horizontal bar menu… no dropdowns. My client wants to add a 3rd level of menu for which we think we need dropdowns. I found this tutorial:

http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover

I’ve followed it carefully and, at least according to Firebug, I’ve added the necessary files and they’re loading:

stylesheets[all][] = addons/bootstrap/jquery.smartmenus.bootstrap.css
scripts[] = ‘jquery.smartmenus.js’
scripts[] = ‘addons/bootstrap/jquery.smartmenus.bootstrap.js’

When I first go to the page, it isn’t working. The expanded menu item shows as a horizontal menu, not a dropdown. However, when I resize the page, emulating a smaller screen, once I click an item, it collapses into a button menu, which works properly and displays 3 levels.

If I return my screen to full size at that point, the menus suddenly turn into dropdowns… they are beautiful (though they don’t have carets), the third level is there and working. But when I click on any item, the menu returns to its previous non-dropdown state.

I’m hoping that someone familiar with Bootstrap and Smartmenus (both of which are new to me) can tell me where to look and how to figure this out.

Thanks!

[admin]

Hi, please post some sort of live demo that I could test and investigate the issue(s). It’s obviously a CSS “misconfiguration” but it’s, unfortunately, impossible to guess what exactly needs to be tweaked without being able to test your code (furthermore, as far as I understand, you are using an unusual setup with 2 horizontal levels so a live demo is really needed).

[HallSL]

Let me work on that. This is a live site so I can’t just turn on the broken method and leave it that way. I’ll build a mirror and send a link.

Knowing that the 2 horizontal levels is unusual is a good clue though. I will look to see if I can figure out where that happens and reverse it.

Thanks for the response!

[HallSL]

Hi, here’s a link to a mirror of the site:

http://www.dungenesstesting.com

Right now the News menu is set to be expanded. There is also a test 3rd level item under News | Local | New York.

As you see, the expanded item, shows all the items in a horizontal bar. (For reference, the other menu items when clicked expand to that horizontal bar).

If you narrow in the page so that it should collapse the menu to the button, it continues to show items, but if you click an item, it all collapses into the button. If you then expand the page to full width, the dropdown appears on hover over News and if you hover over Local, the item for New York appears. If only it would stay this way, but no, if you click on an item, it returns to the non-dropdown expanded state.

Any help would be greatly appreciated.

Hall

[admin]

OK, I took a look. The whole horizontal sub menu logic seems to be done with the following JS code:

        // secondary navbar
        if (window.innerWidth > 768) {
            var dropdown = navbar.find('.dropdown').not('.dont-expand');
            dropdown.removeAttr('data-toggle').addClass('active');
            var submenu = dropdown.find('.dropdown-menu');
            if (submenu.length > 0) {
                submenu.removeClass('dropdown-menu')
                    .addClass('menu nav navbar-nav')
                    .appendTo('#sub-menu');
            }
        }

in:
http://www.dungenesstesting.com/sites/default/files/js/js_N09faP46myD-UQKuPnAYFuVawecYv5r_1637im6dDBY.js

This is not done properly since it relies purely on JS for detecting the viewport width and also it’s not dynamic but instead the width is detected just on page load and the configuration is not updated if the width changes afterwards.

I can see what the idea of the coder was – in mobile view just the main multilevel menu should be displayed and the horizontal sub menu should be displayed just in desktop view. However, as I mentioned, it’s not done right so my suggestion is to use the following JS code instead:

        // secondary navbar
        var dropdown = navbar.find('.dropdown').not('.dont-expand');
        dropdown.addClass('active');
        var submenu = dropdown.find('.dropdown-menu');
        // create secondary horizontal navbar by cloning the primary's active sub menu
        if (submenu.length > 0) {
            submenu.clone().removeClass('dropdown-menu')
                .addClass('menu nav navbar-nav')
                .appendTo('#sub-menu');
        }
        // disable primary navbar's active sub menu in desktop view (since it's already available as the secondary navbar)
        navbar.find('.navbar-nav').eq(0).bind('activate.smapi', function(e, item) {
            var obj = $(this).data('smartmenus');
            if (!obj.isCollapsible()) {
                if ($(item).parent().hasClass('active')) {
                    return false;
                }
            }
        });

I’ve added some comments what the code does. In addition you will need to use the following CSS to show/hide the secondary horizontal navbar when appropriate:

#sub-menu-container {
    display: none;
}
@media (min-width:768px) {
    #sub-menu-container {
        display: block;
    }
}

Lastly, about the missing carets – you will need to add them in the source code like normally you would with Bootstrap:

...
<a href="/news" title="" data-target="#" class="dropdown-toggle">News <span class="caret"></span></a>
    <ul class="dropdown-menu">...

Let me know if you still have any troubles. I am not completely sure how your server-side logic works so, it’s possible that there still might be some issues..

[Author]

Posts