I am facing a challenge that I need help with. I have a button that, when clicked, should expand the navigation bar to cover the entire screen without pushing down the content below it. However, despite setting the height of the navigation bar to 100vh, the page remains scrollable and the content is not fully covered. Here is the code snippet I have been working on:
<div class="wrapper">
<div class="top-nav">
<nav id="nav">
<div class="nav-bar">
<ul>
<li><button onclick="expandNav()"><i class="fal fa-bars"></i></button></li>
<li><a href="#"><i class="fab fa-connectdevelop"></i></a></li>
<li><a href="#">Ban</a></li>
<li><a href="#">Warn</a></li>
<li><a href="#">Gift</a></li>
<li><a href="#">Records</a></li>
<li><a href="#">Moderator</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#"><i class="fas fa-user-circle"></i></a></li>
<li><a href="#"><i class="fal fa-sign-out-alt"></i></a></li>
</ul>
</div>
</nav>
</div>
<div class="main-content">
</div>
</div>
<script>
function expandNav() {
document.getElementById("nav").style.height = "100vh";
}
</script>
My CSS code is as follows:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
}
.wrapper {
height: 100%;
}
.top-nav .nav-bar {
width: 82%;
transition: 0.5s;
}
/* START -- Disabling resizing affects*/
...
/* END -- Disabling resizing affets*/
...
Essentially, my issue lies in the fact that the navigation bar does not cover the entire screen even after setting the height to 100vh. I want it to behave like Apple's website menu where it occupies the whole page without pushing the content down. For clarity, you can visit the Apple website, resize the window horizontally, and click on the menu to see how it expands.
Please refer to this screenshot for a visual representation of my current progress.
Any assistance would be greatly appreciated!