I want to create a dropdown mega menu for the navbar that would have the menu expanded on a large device and minimalized on a small device. I will provide photos with what I done so far and what I want to achieve,
I tried to hide the div with display none, position absolute and move it -9999px away and with .remove()
on JS, but nothing worked so far.
if (window.innerWidth <= 986)
$('.lateral').addClass("hide");
else
$('.lateral').removeClass("hide");
$(window).resize(function() {
if ($(window).width() <= 986)
$('.lateral').addClass("hide");
else
$('.lateral').removeClass("hide");
});
.lateral {
position: relative;
width: 98%;
height: 28%;
float: left;
color: white;
}
.hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lateral">
<div class="container">
<ul class="navbar-nav nav mr-auto vertical-menu">
<li class="navbar-header">
</li>
<li id="NavDropdown" class="navbar-collapse collapse vertical-menu
">
<p>produs</p>
</li>
<li id="NavDropdown" class="navbar-collapse collapse vertical-menu ">
<p>produs</p>
</li>
</div>
</ul>
</nav>
I expected my code to delete the whole div, not just the text from it.
display:none
will not "delete" anything.