Evenly Split Items As Screen Shrinks

I have a menu that can have a variable number of items. As the screen width decreases, I would like for half the menu to drop to a second row. Ideally, I could have this happen aga

Solution 1:

You can get the menu items to wrap to a second (or more) rows by limiting the width of the navbar ul and adding flex-wrap.

You won’t be able to get the menu items to wrap equally (the items will go to the end of the space and then wrap), but it that’s important to you, you could adjust the width of the navbar ul using custom media queries to get the menu items to move more equally.

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script><navclass="navbar navbar-expand-md navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto w-75 flex-wrap"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Lorem ipsum</a></li><liclass="nav-item"><aclass="nav-link"href="#">dolor sit</a></li><liclass="nav-item"><aclass="nav-link"href="#">amet consectetur</a></li><liclass="nav-item"><aclass="nav-link"href="#">adipisicing elit</a></li><liclass="nav-item"><aclass="nav-link"href="#">Temporibus</a></li><liclass="nav-item"><aclass="nav-link"href="#">corporis suscipit</a></li><liclass="nav-item"><aclass="nav-link"href="#">unde quidem adipisci</a></li><liclass="nav-item"><aclass="nav-link"href="#">ipsa rem</a></li><liclass="nav-item"><aclass="nav-link"href="#">aliquam error</a></li><liclass="nav-item"><aclass="nav-link"href="#">quas nesciunt</a></li><liclass="nav-item"><aclass="nav-link"href="#">voluptatibus</a></li><liclass="nav-item"><aclass="nav-link"href="#">quasi veniam illum</a></li><liclass="nav-item"><aclass="nav-link"href="#">tempora quam</a></li><liclass="nav-item"><aclass="nav-link"href="#">cupiditate</a></li><liclass="nav-item"><aclass="nav-link"href="#">officia</a></li><liclass="nav-item"><aclass="nav-link"href="#">fuga</a></li><liclass="nav-item"><aclass="nav-link"href="#">esse</a></li></ul></div></nav>