CODEWITHSUNDEEP
javascripthtmljquerycssvisual-web-developer-2010
Dony Peter Puthumana
Dony Peter Puthumana

Reputation: 11

Responsive navigation list not showing content

I would like to add a responsive navigation bar to my blog. I got a video from youtube about responsive navigation bar. But i met with a problem. On 768px the content of navigation menu is not showing. When I inspect with Chrome, those links are already there. But I can't see. I am looking for a solution Please See this Image When Inspecting those Links are there But they are not visible

HTML Code

<!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="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>ATC</title>
</head>
<body>
    <nav>
        <div class="logo">
            <h4>ATC</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Orders</a></li>
            <li><a href="#">Forms</a></li>
            <li><a href="#">Act & Rules</a></li>
            <li><a href="#">Students Corner</a></li>
            <li><a href="#">Schools Gallery</a></li>
            <li><a href="#">Useful Links</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="app.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d4954;
    font-family: 'Poppins', sans-serif;
}
.logo {
    color: rgb(226,226,226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}
.nav-links {
    display: flex;
    justify-content: space-around;
    width: 90%;
}

.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;
    cursor: pointer;
}

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

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

}

@media screen and (max-width:768px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5d4954;
        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;
    }

}

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

Javascript

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();

Please help me to find the solution

Upvotes: 0

Views: 152

Answers (1)

Kevin Daniel Sibug
Kevin Daniel Sibug

Reputation: 1

If you set an element’s position to absolute, its parent should be set to relative in order for it to appear. You can try setting the position of nav to relative when your screen size is 768px.

Edit:

Remove the following property:

.nav-links li {
    opacity: 0;
}

Best of luck.

Upvotes: 0

Related Questions