title: Wide top navigation menu -- li won't wrap
body: <p>I'm a long time developer, but new to Bootstrap.  I am working on a top nav for a website that has 6+ items horizontal and numerous links in dropdown menus. I have everything working, but I cannot get the main menu items to wrap with smaller screen sizes.  No matter what I've tried, the overflow goes offscreen.  Thanks.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-sm flex-row&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;#&quot; style=&quot;width: 250px; height: auto; margin: 0 3rem;&quot; /&gt;&lt;/a&gt;
      &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;&lt;i class=&quot;fas fa-bars&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
          &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle catogary&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;WHO WE ARE&lt;/a&gt;
                  &lt;div class=&quot;dropdown-menu single&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                      &lt;div class=&quot;container&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;
                              &lt;div class=&quot;col-md-12&quot;&gt;
                                  &lt;ul class=&quot;nav flex-column&quot;&gt;
                                      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt; &lt;/li&gt;
                                      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt; &lt;/li&gt;
                                      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt; &lt;/li&gt;
                                      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt; &lt;/li&gt;
                                      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt; &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle catogary&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;PRODUCTS&lt;/a&gt;
                  &lt;div class=&quot;dropdown-menu mega&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 3&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 4&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle catogary&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;DESIGN TOOLS&lt;/a&gt;
                  &lt;div class=&quot;dropdown-menu mega&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 3&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              &lt;ul class=&quot;nav flex-column&quot;&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; href=&quot;#&quot;&gt;Object 4&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 2&lt;/a&gt; &lt;/li&gt;
                                  &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link i&quot; href=&quot;#&quot;&gt;Item 3&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;CATALOGS&lt;/a&gt;&lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <p><a href="https://codepen.io/doncroy/pen/qBNbwja" rel="nofollow noreferrer">CodePen HTML with CSS and Script</a></p>