Reply To: Troubleshooting help requested

[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..