This is my code and it's horizontal on desktop screen and on phone it's vertical and x button(closebtn) is only on phone displayed and closes the menu bar. How do I automatically display it again, after resizing the page to desktop size?
function oty() {
document.getElementById("tab").style.display = "none";
}<div class="icon-bar" id="tab">
<button class="closebtn" onclick="oty()">X</button>
<button class="tablink">Home</button>
<button class="tablink">News</button>
<button class="tablink">Contact</button>
<button class="tablink">About</button>
</div>@mediaYou can easily add media queries that determine a display of any given element based on viewport size, which is the foundation of responsive design anyways. In your case, keeping the markup as-is, the CSS could be something like...
@media screen and (max-width: 1024px) { // Adjust the break-point size as needed
#tab {
display: none;
}
}
resize event and check the viewport sizeWhile I'd strongly advise against using JavaScript for something CSS is built for, it is possible with JavaScript. Try something like following.
resize event listener to window: (e.g. window.addEventListener('resize', handleResize))tab element's visibility.