I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large due to increasing its height to hide the entire page when toggled.
<div class="module widget-
handle mobile-toggle right
visible-sm visible-xs"><a
id="mobile-nav" href="#">
<div class="container1"
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
<script>
function myFunction(x){
x.classList.toggle
('change');
}</script>
</div>
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="menu" class="menu"><li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown"><a title="Contact" href="https://example.com/contact/">Contact
Css to increase height of container on drop.
@media(max-width: 768px).
{.collapse {position:
absolute; height: 775px;
background-color:white; z-
index: 99999 !important;
top:75px; left: -50px;
line-height: 10px;}}
How can I ensure that the menu always matches the screen size and completely covers it, regardless of varying heights of different pages? Some pages display the full-screen coverage but with excessive height, while others show content below the menu, and adjusting the size for taller pages would make it overly large.
Someone recommended using
var x = "Total Height: " + screen.height;
But how do I incorporate this into my existing function mentioned above and here
function myFunction(x){
x.classList.toggle
('change');
Can I do
function myFunction(x){
x.classList.toggle; var x = "Total Height: " + screen.height;
('change');
?