Reply To: NavBar "More" Menu

So I think I have a fix. Or rather, I have a fix that works for me. My navbar is only one submenu, and I haven’t tested any more layers than that. Word of warning, this fix requires editing the theme’s code – any future updates will overwrite it. Hopefully the devs can take a look and see if this can be incorporated in future updates. Also, I’m pretty new to jQuery and Bootstrap. I make no promises about the quality of this code. It works for me; I probably can’t help you with it.

First fix – make the ‘More’ menu go away when the window is enlarged
Edit /wp-content/themes/enlightenment/js/call.js;
Find the line (around line 28) which looks like this:
if($(window).width() >= 768)
and change it to this:
if($(window).width() >= 768 && $(window).width() <= 1000)
Note: I used ‘1000’ because it works with my navbar. You may want to try another value if things don’t look right for you.

Second fix – make the ‘More’ menu work for submenus
Again, edit /wp-content/themes/enlightenment/js/call.js;
Find the two functions enlightenment_trim_nav and enlightenment_untrim_nav;
Replace them both with this code:

        function enlightenment_trim_nav() {
                if($('#masthead').get(0).offsetHeight < $('#masthead').get(0).scrollHeight) {
                        if( ! $('#more-links').length )
                                $('#site-navigation .nav').append('<li id="more-links" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#more-links">' + enlightenment_theme_call_js.nav_more_text + ' <span class="caret"></span></a><ul class="dropdown-menu"></ul></li>');
                        $($('#site-navigation .nav > .menu-item').get().reverse()).each(function() {
                                if($('#masthead').get(0).offsetHeight < $('#masthead').get(0).scrollHeight)
                                        $(this).prependTo('#more-links > .dropdown-menu');
                        });
                        $('#more-links .dropdown').each(function() {
                                $(this).removeClass('dropdown');
                                $(this).addClass('dropdown-submenu');
                                $(this).find(".dropdown-toggle").attr('data-toggle','');
                                $(this).find(".dropdown-toggle").attr('href','#');
                                $(this).find(".dropdown-toggle").removeAttr('class');
                        });
                }
        }
        function enlightenment_untrim_nav() {
                $('#more-links > .dropdown-menu').children().each(function() {
                        $(this).appendTo('#site-navigation .nav');
                        if($(this).hasClass('dropdown-submenu')) {
                                $(this).removeClass('dropdown-submenu');
                                $(this).addClass('dropdown');
                                $(this).find("a:first").attr('data-toggle','dropdown');
                                $(this).find("a:first").addClass('dropdown-toggle');
                        }
                })
                $('#more-links').remove();
        }

Next, in the Theme Options, go to Design and enter this custom CSS:

/* Make drop down sub menus appear when collapsed */
.dropdown-submenu .caret, .dropdown-submenu .dropdown-close {
    display: inline-block;
}

.dropdown-submenu {
    position:relative;
}

.dropdown-submenu>.dropdown-menu {
    top:0;
    left:0px;
    -webkit-border-radius:0 0px 0px 0px;
    -moz-border-radius:0 0px 0px 0px;
    border-radius:0 0px 0px 0px;
    position: relative;
    border: medium none;
    box-shadow: none;
    text-indent: 10px;
    min-width: 150px;
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
}

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

.dropdown-submenu:active>a:after { 
    border-left-color:#ffffff;
}

.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;
}
/*End dropdown sub-menus*/

Good luck!