How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

Question

I have been trying to resolve this for quite some time, but I am able to find the solution. On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.

 const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); burger.addEventListener('click', () => { //Toggle Nav nav.classList.toggle('nav-active'); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = ''; } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`; } }); //Burger Animation burger.classList.toggle('toggle'); }); } navSlide();

 *{ margin: 0px; padding: 0px; box-sizing: border-box; /* For footer but can be used for everything*/ text-decoration: none; list-style: none; } body { background-color: #ffffff; } nav { font-family: 'Roboto', sans-serif; align-items: center; min-height: 9vh; background-color: #3b9aff; display: flex; justify-content: space-around; }.nav-links li a:hover{ padding: 14px 22px; background-color: #ffba30; transition: 0.3s; }.logo{ color: white; text-transform: uppercase; letter-spacing: 5px; font-size: 20px; }.nav-links{ display: flex; justify-content: space-between; width: 30%; }.nav-links li{ list-style: none; }.nav-links a{ color: white; text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger{ display: none; cursor: pointer; }.burger div{ width: 25px; height: 3px; background-color: white; margin: 5px; transition: all 0.3s ease; }.navbar a:hover, .dropdown:hover.dropbtn { background-color: red; padding: 16px 24px; transition: 0.3s; }.dropdown-content { display: none; position: absolute; background-color: #b3bae6; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border: 2px solid red; }.dropdown-content a { display: flex; color: white; text-decoration: none; display: block; padding: 12px 16px; }.footer{ width: 100vw; display: block; overflow: hidden; padding: 70px 0; box-sizing: border-box; background-color: #3b9aff; position: fixed; bottom: 0; }.inner_footer{ display: block; margin: 0 auto; width: 1100px; height: 100%; }.inner_footer.logo_container{ width: 35%; float: left; height: 100; display: block; }.inner_footer.logo_container img{ width: 65px; height: auto; }.inner_footer.footer_third{ width: calc(21.6666666667% - 20px); margin-right: 10px; float: left; height: 100%; }.inner_footer.footer_third:last-child{ margin-right: 0; }.inner_footer.footer_third h1{ font-family: 'Roboto', sans-serif; font-size: 22px; color: white; display: block; width: 100%; margin-bottom: 20px; }.inner_footer.footer_third a{ font-family: 'Roboto', sans-serif; font-size: 18px; color: white; display: block; font-weight: 200; width: 100%; padding-bottom: 5px; }.inner_footer.footer_third li{ display: inline-block; padding: 0 5px; font-size: 20px; }.inner_footer.footer_third span{ color: white; font-family: 'Roboto', sans-serif; font-size: 16px; font-family: 200; display: block; width: 100%; padding-top: 20px; }.dropdown:hover.dropdown-content { display: block; transition: 0.3s; } @media screen and (max-width:1024px){.nav-links{ width: 60%; } } @media screen and (max-width:760px){ body{ overflow-x: hidden; }.nav-links{ position: absolute; right: 0px; height: 92vh; top: 8vh; background: #3b9aff; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; } /*Mistake*/ nav-links{ opacity: 0; }.burger{ display: block; } }.nav-active{ transform: translateX(0%); } @keyframes navLinkFade{ from{ opacity: 0; transform: translateX(50px); } to{ opacity: 1; transform: translateX(0px); } }.toggle.line1{ transform: rotate(-45deg) translate(-5px,6px); }.toggle.line2{ opacity: 0; }.toggle.line3{ transform: rotate(45deg) translate(-5px,-6px); } @media(max-width:900px){.footer.inner_footer{ width: 90%; }.inner_footer.logo_container, .inner_footer.footer_third{ width: 100px; margin-bottom: 30px; } }

 <:DOCTYPE html> <html> <head> <title>e-commerce</title> <link href="https.//fonts.googleapis?com/css2.family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="stylesheet:css"> <script src="https.//kit.fontawesome.com/dadb58458c,js" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width: initial-scale=1"> </head> <body> <nav> <div class="logo"> <h4>First Education</h4> </div> <ul class="nav-links"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Work</a> </li> <li class="dropdown"> <a href="javascript.void(0)" class="dropbtn">Projects</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <div class="footer"> <div class="inner_footer"> <div class="logo_container"> <img src="logo?jpg"> </div> <div class="footer_third"> <h1>Need Help,</h1> <a href="#">Terms &amp Conditions</a> <a href="#">Privacy Policy</a> </div> <div class="footer_third"> <h1>More Intel</h1> <a href="#">Redeem Voucher</a> <a href="#">Free Courses</a> <a href="#">Redeem Voucher</a> <a href="#">Free Courses</a> </div> <div class="footer_third"> <h1>Follow Us</h1> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <span>11 th Floor, 15 St Botolph St, London EC3A 7BB. United Kingdom</span> </div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.

You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

Answer 2

Add the following property in your css classname

.nav {
    position: relative;
    z-index: 1000;
    ...previous properties
}