So, been working on this for about 2 weeks now on JUST the navbar itself. I have tried so many things that i don't recall what i have used to try to fix it.
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 >
<div >
<a href="/">Home</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Amarr Empire
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Caldari State
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Minmatar Republic
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Gallente Federation
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Guristas Pirates
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Angel Cartel
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blood Raider Covenant
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ORE
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servant Sisters of Eve
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Mordu's Legion Command
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sansha's Nation
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serpentis
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Triglavian Collective
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li >
<a href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
EDENCOM
</a>
<ul >
<li><a href="#"> Frigate Class</a>
<ul >
<li><a href="#">Frigate</a>
<ul >
<li>
<a href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
</ul>
</div>
</div>
</nav>CodePudding user response：
You're looking to enable flexbox wrapping on the menu <ul>.
Change
<ul >
To
<ul >