1

It works on my old navbar (but it's boostrap 3 and this project is on 5). The text overflows my navbar and causes the text/website to get extra space then what it's supposed to be showing. I need a genius to resolve this for me as i have been stumped on this for a long time.

Issue (images) https://gyazo.com/c212a931d6770b77998cb3fea3ae87d1 i'm highlighting it as the text can't be seen due to white backround.

Trying to get working (old navbar) https://gyazo.com/66c482022e325cd9bd335ff666377474

Here is a JSfiddle to give an example plus the code i'm using. https://jsfiddle.net/yf90uxhc/2/

code:

document.addEventListener("DOMContentLoaded", function() {
  // make it as accordion for smaller screens
  if (window.innerWidth < 992) {

    // close all inner dropdowns when parent is closed
    document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
      everydropdown.addEventListener('hidden.bs.dropdown', function() {
        // after dropdown is hidden, then find all submenus
        this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
          // hide every submenu as well
          everysubmenu.style.display = 'none';
        });
      })
    });

    document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
      element.addEventListener('click', function(e) {
        let nextEl = this.nextElementSibling;
        if (nextEl && nextEl.classList.contains('submenu')) {
          // prevent opening link if link needs to open dropdown
          e.preventDefault();
          if (nextEl.style.display == 'block') {
            nextEl.style.display = 'none';
          } else {
            nextEl.style.display = 'block';
          }

        }
      });
    })
  }
  // end if innerWidth
});
// DOMContentLoaded
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">Home</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Amarr Empire
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Caldari State
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Minmatar Republic
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Gallente Federation
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Guristas Pirates
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Angel Cartel
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Blood Raider Covenant
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              ORE
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Servant Sisters of Eve
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Mordu's Legion Command
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Sansha's Nation
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Serpentis
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Triglavian Collective
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              EDENCOM
            </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Frigate Class</a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Frigate</a>
                  <ul class="submenu dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="#"> </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- -->
      </ul>
    </div>
  </div>
</nav>
Vickel
  • 7,879
  • 6
  • 35
  • 56
Skippy The Canadian Kangaroo
  • 54
  • 6

1 Answers1

1

You're looking to enable flexbox wrapping on the menu <ul>.

Change

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

To

<ul class="navbar-nav flex-wrap me-auto mb-2 mb-lg-0">
Raxi
  • 2,452
  • 1
  • 6
  • 10
  • Awesome thank you very much! I didn't think it would have effected that spot. So i'm taking a wild guess here is that "flex-wrap" basically goes to the max width of your page and pasts everything into another line? – Skippy The Canadian Kangaroo Dec 19 '21 at 10:58
  • kinda. The fact that the navbar is a flexbox means it fills its "container" in a row-wise fashion (from left to right) until the next item no longer fits, then it starts a new row directly below it (and repeat...). -- the fact that wrapping wasn't enabled ment that that "until the next item no longer fits" part wasn't in effect before. And as for the width, in your case the container (the navbar) happens to cover the full width of the entire viewport/page - so yes in effect you're correct. If you made the navbar `width 50%` then the menuitems would start wrapping at the half-way point. – Raxi Dec 19 '21 at 11:18
  • In proper CSS (without the bootstrap classes), it would be the switch from `flex-flow: row nowrap` to `flex-flow: row wrap` – Raxi Dec 19 '21 at 11:20