Duplicates a main navigation point into sub level and sets the Twitter Bootstrap "drop" options. As a result, one obtains in the MobileView a "normal" Bootstrap dropdown menu. In Desktop View the dropdown options are removed and you can use the menu with MouseHover effects. At an interval, the size of the browser window is checked, which adapts …

responsiveNavigation.js

(function($) {
    $.fn.responsiveNavigation = function() {
        // check if dropdown navigation in mobile mode
        var responsiveActive = $('li.responsive').length;

        // window size lower 767px and nav is not in mobile mode
        if ($(window).width() < 767 && !responsiveActive) {
            $(this).each(function() {
                $(this).parent().children('a').clone().prependTo($(this)).wrap("<li class=\"responsive\"></li>");
                $(this)
                    .parent().addClass('dropdown')
                    .children('a').addClass('dropdown-toggle')
                        .attr({
                            'data-toggle': 'dropdown',
                            'role': 'button',
                            'aria-expanded': false
                        });
                $(this).addClass('dropdown-menu').attr('role', 'menu');
            });
            $('li.responsive span').remove();
        }

        // window size greather 767px and nav is in mobile mode
        if ($(window).width() >= 767 && responsiveActive) {
            $(this).each(function() {
                $('li.responsive').remove();
                $(this)
                    .parent().removeClass('dropdown')
                    .children('a').removeClass('dropdown-toggle')
                        .removeAttr('data-toggle')
                        .removeAttr('role')
                        .removeAttr('aria-expanded');
                $(this).removeClass('dropdown-menu').removeAttr('role');
            });
        }
    }

    jQuery(document).ready(function() {
        setInterval(function() {
            $('header ul.nav li ul').responsiveNavigation();
        }, 1000);
    });
})(jQuery);