Bootstrap 4 flexible responsive navbar menu

Question

NOTE that I\'m not asking how to align items in navbr menu (left or right), but how to dynamically move items from navbar to dropdown.

I\'m using Bootst

Answer 1

Instead use height to detect when the Navbar items have wrapped. You'll may need to adjust the JS to accomodate the other menu items (About, Help, Sign-out). Here's the jQuery function for Bootstrap 4...

var autocollapse = function (menu,maxHeight) {

    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        while (navHeight > maxHeight) {
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');

        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }

        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
};


$(document).ready(function () {

    // when the page laods
    autocollapse('#nav',50); 

    // when the window is resized
    $(window).on('resize', function () {
        autocollapse('#nav',50); 
    });

});

Demo: https://www.codeply.com/go/wKWHgsMXah

---

Related: Bootstrap navbar hide menu elements when resizing