When I click the button on my mobile sidenav menu, it appears and disappears. I'm trying to figure out how to position
<div class="mtsMenu_footer">position: absolute; and bottom: 0; in the CSS, which made the footer go down, but on mobile devices, the footer is not visible as it goes off the screen and appears lower than expected.
Edit: Thanks to AStombaugh's solution, I was able to resolve the issue by utilizing display: flex; and justify-content: space-between;. Additionally, I moved the footer div outside of the menu container to avoid any overlapping problems.
Here is an example of the JavaScript code for the sidebar menu:
// Sidebar Menu
var mobileMenu = document.querySelector(".btnmenu");
function openMenu(e) {
e.stopPropagation();
//Show & Hide Menu
var x = document.getElementById("mtsMenu");
x.classList.toggle("show");
let toggle = document.querySelector('.btnmenu');
toggle.classList.toggle("visible");
//Show & Hide Overlay
var y = document.getElementById("container_overlay");
y.classList.toggle("on");
//Prevent Page scroll with overflow
var z = document.getElementsByTagName("body")[0];
z.classList.toggle("ppscroll");
}And here is an excerpt from the CSS styling:
<div onclick="openMenu(event)" class="btnmenu">Open Menu</div>
<div id="mtsMenu">
<div class="mtsMenu_container">
<!-- Menu items -->
</div>
<div class="mtsMenu_footer">
<hr class="solid" />
<span>THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT -THIS IS FOOTER CONTENT - THIS IS FOOTER CONTENT</span>
</div>
</div>
<div id="container_overlay"></div>