CODEWITHSUNDEEP
javascripthtmlcss
Marco Chavez
Marco Chavez

Reputation: 215

Cannot have my menu hidden when not active

I am trying to create a navigation bar that is translated 100% over to the right until the user clicks on the burger and moves it back into its normal position. I am running into issues when I try to disable x-overflow. Users can scroll over to the right and see the grey background so my total view width is 200%. Will provide my code.

style.css

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #646464;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #646464d5;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 1.5rem;
}

.nav-links {
    display: flex;
    width: 30%;
    justify-content: space-around;
}

.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 {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

section main {
    height: 92vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}

section main::after {
    content: "";
    background: url("../business.jpg");
    background-size: cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

section main h1 {
    font-size: 2rem;
    margin: 2rem;
}

section main a {
    padding: 1rem;
    border: none;
    background-color: blue;
    color: white;
    margin: 3rem;
    font-size: 1rem;
    border-radius: 15px;
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 80vh;
        top: 8vh;
        background-color: #646464d5;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        visibility: hidden;
    }
    .nav-links li {
        opacity: 0;
    }

    .nav-links a {
        font-size: 2rem;
    }

    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
    transform: translateX(0);
    visibility: visible;
}

#powerful{
    animation-name: powerful;
    animation-duration: 3s;
}

@keyframes powerful{
    0%{
        color: white;
        transform: rotate(45deg);
    }  
    50%{
        color: rgb(247, 111, 111);
        transform: rotate(15deg) scale(1.2);
    }
    100%{
        color: white;
        transform: rotate(0deg);
    }
}

@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);
}

Here is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <title>Home - Marco Chavez</title>
</head>
<body>
    <nav>
        <div class="logo">
            <h4>Marco Chavez</h4>
        </div>
        <ul class="nav-links">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="pages/about.html">About</a>
            </li>
            <li>
                <a href="./assets/ResumeMChavez2020-03.pdf" download>Resume</a>
            </li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <section>
        <main>
            <h1>I build
                <div id="powerful">
                    <span>Powerful</span>
                </div>
            web applications</h1>
            <a href="pages/schedule.html">Schedule a meeting</a>
        </main>
    </section>

    <script src="./js/script.js"></script>
</body>
</html>

JavaScript

const navSlide = () => {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')

        navLinks.forEach((link, index) => {
            if(link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .4}s`;
            }
        });

        burger.classList.toggle('toggle');
    });
}

navSlide();

Upvotes: 0

Views: 55

Answers (1)

Florin Relea
Florin Relea

Reputation: 513

@media screen and (max-width: 768px) {
    .nav-links {
        position: fixed;
    }
}

Upvotes: 2

Related Questions