0
189
Viewshow to remove nav item on window resize?
I can make target disappear easily but target to appear in dropdown part is tricky. I've used window.onresize & window.onload with below condition
if (window.innerWidth < 1190 && window.innerWidth > 1188) { var dt = document.createElement("dt"); dt.innerHTML = 'Target'; dt.className = '.target' dl.prepend(dt); } if (window.innerWidth > 1189 && window.innerWidth < 1191) { console.log('done') dt?.remove() }
·
Juan Pablo Isaza
2 answers
Answer question0
If you're okay with using CSS for this, then a really easy way to do it would be to use media queries.
@media only screen and (min-width: 1189px) and (max-width: 1191px) {
.target {
display: none;
}
}
·
Juan Pablo Isaza
Report
0
Maybe you can create static targets and manage who is gonna be hidden using classes:
<nav>
<ul>
<li>
Home
</li>
<li>
Item
</li>
<li id="target-main">Target</li>
<li class="nav-more-container">More
<ul class="nav-more-list">
<li id="target-more">Target</li>
<li>Item</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</nav>
.hidden {
display: none;
}
window.addEventListener("resize", () => {
const {
innerWidth
} = window;
const targetMain = document.getElementById("target-main");
const targetMore = document.getElementById("target-more");
if (innerWidth < 1190) {
targetMain.setAttribute("class", "hidden");
targetMore.setAttribute("class", "");
} else {
targetMain.setAttribute("class", "");
targetMore.setAttribute("class", "hidden");
}
})
·
Juan Pablo Isaza
Report
Answer question