Navbar displays an empty space on the right side

Question

https://codepen.io/Cplay/pen/WNGYezE A greenie that is trying to code. When I visit the page on mobile mode there appears empty space on the right side, but when I click on the toggle menu of the navigation-bar, it goes away. Could someone help me with this problem? I used 3 languages, html css and javascript. And already tried to use overflow-x: hidden;. But I do not know where to place this piece of code.

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}
/* navigation bar */

nav {
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    width: 30%;
    display: flex;
    justify-content: space-around;
    text-decoration: none;
}
.nav-links li {
    list-style: none;
}
.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 35px;
}
.burger {
    display: none;
}
.burger div {
    width: 30px;
    height: 3px;
    background-color: black;
    margin: 5px;
    transition: all 0.3s ease;
}
@media screen and (max-width:1336px) {
    .nav-links {
        display: flex;
        width: 50%;
        justify-content: space-around;
        text-decoration: none;
    }
}
@media screen and (max-width:1100px) {
    .logo {
        width: 10%;
    }
}
@media screen and (max-width:1100px) {
    .body {
        overflow: hidden;
    }
    .body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 205vh;
        top: 8vh;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        cursor: pointer;
    }
}
.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);
}
p {
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 300%;
}

<nav>
        <ul class="nav-links">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Get the game</a>
            </li>
        </ul><img class="logo" src="logo.png" width="10%">
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

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.classList.toggle('nav-active');

            //animation
        navLinks.forEach((link, index) => {
            if (link.style.animation){
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 1.5}s`;
            }
        });
        //animation
        burger.classList.toggle('toggle');

    });

}

navSlide();

Answer 1

Every Thing with your code is fine. Just Change some property in the.nav-links. Copy and replace the following.nav-links into your code. Your white space will go away. Fixed position and right:0 will make it stay on the right side. Also make top:0 instead of 22vh.

 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.classList.toggle('nav-active'); //animation navLinks.forEach((link, index) => { if (link.style.animation){ link.style.animation = '' } else { link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 1.5}s`; } }); //animation burger.classList.toggle('toggle'); }); } navSlide();

 * { margin: 0; padding: 0; box-sizing: border-box; background-color: #f4f4f4; } /* navigation bar */ nav { background: none; display: flex; justify-content: space-between; align-items: center; }.nav-links { width: 30%; display: flex; justify-content: space-around; text-decoration: none; }.nav-links li { list-style: none; }.nav-links a { color: black; text-decoration: none; font-size: 35px; }.burger { display: none; }.burger div { width: 30px; height: 3px; background-color: black; margin: 5px; transition: all 0.3s ease; } @media screen and (max-width:1336px) {.nav-links { display: flex; width: 50%; justify-content: space-around; text-decoration: none; } } @media screen and (max-width:1100px) {.logo { width: 10%; } } @media screen and (max-width:1100px) {.body { overflow: hidden; }.body { overflow-x: hidden; }.nav-links { position: fixed; right: 0; height: 100vh; top: 0; background-color: white; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li { opacity: 0; }.burger { display: block; cursor: pointer; } }.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); } p { font-size: 100%; font-family: 'Montserrat', sans-serif; } h1 { font-family: 'Montserrat', sans-serif; font-size: 300%; }

 <nav> <ul class="nav-links"> <li> <a href="index.html">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Get the game</a> </li> </ul><img class="logo" src="logo.png" width="10%"> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav>

@media screen and (max-width:1100px) {
.nav-links {
    position: fixed;
    right: 0;
    height: 100vh;
    top: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

}