So as you can see in this video my page looks as it should when in mobile view however when i click to toggle the side bar it appears but has a white block above and below which doesn't get covered by header or footer they get shifted to the left. evidence: https://gyazo.com/1b40bcd5bed962767e8835ddae594eed
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Lewis Haddon">
<title>Business website</title>
<link rel="stylesheet" href="./css/test2.css" type="text/css">
</head>
<body>
<nav id="navbar">
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li><a href="">Home</a></li>
<li><a href="">S3</a></li>
<li><a href="">RS6</a></li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="content">
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-about"></div>
<div class="footer-links"></div>
<div class="footer-social"></div>
</div>
<div class="footer-bottom">
© Family Cars | Designed by Lewis Haddon
</div>
</div>
</div>
</body>
</html>
Css:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body{
height: 100%;
}
.content{
min-height: 100%;
}
/* footer */
.footer{
background:#992866;
color: aqua;
height: 400px;
position: relative;
}
.footer .footer-content{
border: 1px solid blue;
height: 250px;
}
.footer .footer-bottom{
background: blue;
color: blueviolet;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
/* Navigation header */
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: Arial, Helvetica, sans-serif;
}
/* Left side text */
.logo{
color:rgb(226, 226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
/* All other page links */
.nav-links :hover{
color:#c3073f;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Burger symbol when in mobile mode */
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226,226);
margin: 5px;
transition: all 0.3s ease;
}
/* Changes depending on screensize */
@media screen and (max-width:640px){
}
nav{
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: Arial, Helvetica, sans-serif;
}
/* Left side text */
.logo{
color:rgb(226, 226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
display: none;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
display: flex;
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
}
.nav-links .nav-active{
transform: translateX(0%);
transition: transform 0.5s ease-in;
display: all;
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
/* Transforms line shape */
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
Java:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggles the nav bar
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
//animates the links
navLinks.forEach((link, index) => {
if (link.getElementsByClassName.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
I have tried many different things to change this i have changed display to hidden then show as i have to classes for the nav bar one is nav-links and one is nav-links nav-active which takes place when you click the icon however i cant adjust it to appear properly i have tried setting width to 100 for the other elements but this nav over takes and leaves the gaps as you can see.
my aim is to find the fix so i can make it responsive with any device below ipads so for all mobiles and anything else that size display but first i must fix it for this one display as when its in full screen mode for pc laptop it doesnt use a nav menu as the links are just displayed in the header