Text interfering with the navbar when scrolling down

Hello! I’m still new to web development, and I really need help with this one. When scrolling down, the text interferes with my navbar for some reason, I tried every position I can think of. I think it has to do with margin, but I don’t really know. I posted the code for you guys to help me. Thank you to everyone who wants to help!

function 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 + 0.5}s`;b
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

navSlide();
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.background{
    width: 100%;
    height: 100vh;
 background-image:
    linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
    url(/images/beachpic.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    font-family: 'Poppins', sans-serif;;
}

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

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

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        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(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
    position: relative;
    height: 70px;
}
.link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fbfcfd;
    transition: width .3s;
}
.link:hover::after{
    width: 100%;
    transition: width .3s;
}
.header{
    width: 100%;
    background-color:rgba(0, 0, 0,0.5)
}
.header ul{
    text-align: center;
}
.header ul li{
    list-style: none;
    display: inline-block;
}
.header ul li a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    font-size: 100%;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 25px;
    transition: width .3s;
}
.content{
    color: #fbfcfd;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
}
.heading1{
    font-size: 70px;
    margin-bottom: 10px 0 30px;
    background:transparent;
    position: relative;
    animation: text 5s 1;
}
@keyframes text{
    0%{
        color: transparent;
        margin-bottom: -40px;
    }
    30%{
        letter-spacing: 4px;
        margin-bottom: -40px;
    }
    85%{
        letter-spacing: 3px%;
        margin-bottom: -40px;
    }
}

.welcome{
    font-size: 30px;
    position: relative;
}
 <head>
        <link rel="stylesheet" href="home.css">
    </head>
    <header class="site-header"></header>
    <div class="background">
        <div class="nav">
        <img src="/images/logo.png" alt="" class="logo">
        <ul class="nav-links">
            <li><a href="about.html"class="link">About</a></li>
            <li><a href="#"class="link">Work</a></li>
            <li><a href="#"class="link">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </div>
    </nav>
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="content">
        <small class="welcome">Welcome to</small>
        <h1 class="heading1">H2O <br>Tech<br>Solutions</h1>

    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="container">
        <h1>About Us</h1>
        <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
    </div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
    <script src="script.js"></script>

4 thoughts on “Text interfering with the navbar when scrolling down”

Leave a Comment