implement the navigation menu into the webpage – Blancer.com Tutorials and projects

The Complete Code of The Webpage(HTML, CSS, JS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SXCB Homepage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="container">
                <a href="https://en.wikipedia.org/wiki/St._Xavier%27s_College,_Burdwan"><img src="./logo.png" class="logo" alt=""></a>
                <div class="hamburger-menu">
                    <div class="bar"></div>
                </div>
            </div>
        </nav>

        <h1 class="big-title translate" data-speed="0.1">St. Xavier's College, Burdwan</h1>
        <img src="./Grass.png" class="grass translate" data-speed="-0.2" alt="">
        <img src="./Building.png" class="building translate" data-speed="0.3" alt="">
        <img src="./Sky.png" class="sky translate" data-speed="0.5" alt="">
    </header>

    <section>
        <div class="shadow"></div>

        <div class="container">
            <div class="content opacity">
                <h3 class="title">
                    About Us
                    <div class="border"></div>
                </h3>
                <p class="text">St. Xavier’s College, Burdwan is an educational endeavour of Jesuits of Calcutta Province of the Society of Jesus. It is a second college of Jesuits of Calcutta beside St. Xavier’s College Kolkata. The College was inaugurated on 11th July 2014 by Bishop Cyperian Monis, in the presence of Rev. Fr. Jeyaraj Veluswamy, S J Provincial superior of Calcutta Jesuits.</p>
            </div>

            <div class="imgContainer opacity">
                <img src="./download.jpg" alt="">
            </div>
        </div>
    </section>
    
    <script src="script.js"></script>
</body>
</html>

Css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

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

body{
    font-family: 'Poppins', sans-serif;
}

.container{
    max-width: 70rem;
    padding: 1.5rem 2rem;
    margin: 0 auto;
}

header{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: transparent;
    display: flex;
    backdrop-filter: blur(10px);
}

header:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 25;
    background: transparent;
    display: flex;
    backdrop-filter: blur(2px);
}

.grass{
    position: absolute;
    bottom: -238px;
    width: 1500px;
    right: 0;
    z-index: 19;
}

.building{
    position: absolute;
    width: 1500px;
    bottom: 10px;
    right: 0;
    z-index: 17;
}

.sky{
    position: absolute;
    width: 1500px;
    bottom: 250px;
    right: -40px;
}

nav{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 30;
    background: linear-gradient(to bottom, rgba( 0, 0, 0, 0.05), transparent)
    
}

nav .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    position: relative;
    height: 80px;
    width: 80px;
    overflow: hidden;
    transition: all ease 1s;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.795));
}
.logo:hover{
    scale: 1.2;
}

.hamburger-menu{
    width: 1.55rem;
    height: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.795));
}

.bar{
    position: relative;
    width: 1.2rem; 
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

.bar:before, .bar:after{
    content: '';
    position: absolute;
    width: 1.55rem;
    height: 3px;
    right: 0;
    background-color: #fff;
    border-radius: 2px;
}

.bar:before{
    transform: translateY(-8px);
}

.bar:after{
    transform: translateY(8px);
}

.big-title{
    position: absolute;
    z-index: 30;
    line-height: 4rem;
    top: calc(50% - 2rem);
    width: 100%;
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.76);
}

section{
    width: 100%;
    background-color: #151515;
    position: relative;
}

section .container{
    padding: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

section img{
    width: 100%;
}

section .container > *{
    margin: 2rem;
}

.content{
    color: #fff;
    transform: translateY(-50px);
}

.imgContainer{
    transform: translateY(50px);
}

.title{
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    position: relative;
}

.border{
    position: absolute;
    width: 0%;
    height: 3px;
    background-color: #fff;
    bottom: 0;
    left: 0;
}

.shadow{
    position: absolute;
    bottom: 100%;
    height: 300px;
    width: 100%;
    left: 0;
    z-index: 20;
    background: linear-gradient(to top, #151515, transparent);
}

.opacity{
    opacity: 0;
}

@media (max-width: 850px){
    section .container{
        grid-template-columns: 1fr;
    }
}

@media(max-width: 600px){
    .big-title{
        font-size: 3rem
    }

    .text{
        font-size: .8rem;
    }

    .title{
        font-size: 1.2rem;
    }
}

const translate = document.querySelectorAll(".translate");
const big_title = document.querySelector(".big-title");
const header = document.querySelector("header");
const shadow = document.querySelector(".shadow");
const content = document.querySelector(".content");
const section = document.querySelector("section");
const image_container = document.querySelector(".imgContainer");
const opacity = document.querySelectorAll(".opacity");
const border = document.querySelector(".border");

let header_height = header.offsetHeight;
let section_height = section.offsetHeight;

window.addEventListener('scroll', () => {
    let scroll = window.pageYOffset;
    let sectionY = section.getBoundingClientRect();
    
    translate.forEach(element => {
        let speed = element.dataset.speed;
        element.style.transform = `translateY(${scroll * speed}px)`;
    });

    opacity.forEach(element => {
        element.style.opacity = scroll / (sectionY.top + section_height);
    })

    big_title.style.opacity = - scroll / (header_height / 2) + 1;
    shadow.style.height = `${scroll * 0.5 + 300}px`;

    content.style.transform = `translateY(${scroll / (section_height + sectionY.top) * 50 - 50}px)`;
    image_container.style.transform = `translateY(${scroll / (section_height + sectionY.top) * -50 + 50}px)`;

    border.style.width = `${scroll / (sectionY.top + section_height) * 30}%`;
})

The Complete Code of the full screen overlay responsive navigation menu(html, css)

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Fullscreen Overlay Responsive Navigation Menu Using GSAP</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    </head>

    <body>
        <div class="menu-open">menu</div>
        <div class="nav-container">
            <div class="menu-close">close</div>
            <div class="socials">
                <span>facebook</span>
                <span>instagram</span>
            </div>
            <nav class="menu">
                <div class="menu__item">
                    <a class="menu__item-link">Home</a>
                    <img class="menu__item-img" src="menu-img-one.jpg" />
                    <div class="marquee">
                        <div class="marquee__inner">
                            <span>Home - Home - Home - Home - Home - Home - Home</span>
                        </div>
                    </div>
                </div>
                <div class="menu__item">
                    <a class="menu__item-link">Showcase</a>
                    <img class="menu__item-img" src="menu-img-two.jpg" />
                    <div class="marquee">
                        <div class="marquee__inner">
                            <span
                                >Showcase - Showcase - Showcase - Showcase - Showcase - Showcase
                                - Showcase</span
                            >
                        </div>
                    </div>
                </div>
                <div class="menu__item">
                    <a class="menu__item-link">About</a>
                    <img class="menu__item-img" src="menu-img-three.jpg" />
                    <div class="marquee">
                        <div class="marquee__inner">
                            <span>About - About - About - About - About - About - About</span>
                        </div>
                    </div>
                </div>
                <div class="menu__item">
                    <a class="menu__item-link">Contact</a>
                    <img class="menu__item-img" src="menu-img-four.jpg" />
                    <div class="marquee">
                        <div class="marquee__inner">
                            <span
                                >Contact - Contact - Contact - Contact - Contact - Contact -
                                Contact</span
                            >
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <script>
            var t1 = new TimelineMax({ paused: true });

            t1.to(".nav-container", 1, {
                left: 0,
                ease: Expo.easeInOut,
            });

            t1.staggerFrom(
                ".menu > div",
                0.8,
                { y: 100, opacity: 0, ease: Expo.easeOut },
                "0.1",
                "-=0.4"
            );

            t1.staggerFrom(
                ".socials",
                0.8,
                { y: 100, opacity: 0, ease: Expo.easeOut },
                "0.4",
                "-=0.6"
            );

            t1.reverse();
            $(document).on("click", ".menu-open", function () {
                t1.reversed(!t1.reversed());
            });
            $(document).on("click", ".menu-close", function () {
                t1.reversed(!t1.reversed());
            });
        </script>
    </body>
</html>

css

* {
    font-family: "Neue Montreal";
    font-weight: 400;
}

body {
    margin: 0;
    background: #161616;
}

.menu-open {
    color: #fff;
}

.menu-open,
.menu-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 40px;
    font-size: 20px;
    cursor: pointer;
}

.socials {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 40px 100px;
}

.socials span {
    text-transform: uppercase;
    margin: 0 20px;
    letter-spacing: 0px;
}

.nav-container {
    position: fixed;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: #fff;
}

.menu__item {
    position: relative;
    padding: 0 6vw;
}

.menu__item-link {
    display: inline-block;
    cursor: pointer;
    position: relative;
    transition: opacity 0.4s;
}

.menu__item-link::before {
    all: initial;
    counter-increment: menu;
    position: absolute;
    bottom: 60%;
    left: 0;
    pointer-events: none;
}

.menu__item-link:hover {
    transition-duration: 0.1s;
    opacity: 0;
}

.menu__item-img {
    z-index: 2;
    pointer-events: none;
    position: absolute;
    height: 12vh;
    max-height: 600px;
    opacity: 0;
    left: 8%;
    top: 10%;
    transform: scale(0);
}

.menu__item-link:hover + .menu__item-img {
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s;
}

.menu {
    padding: 10vh 0 25vh;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    font-size: 7vw;
}

.marquee {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: rgb(214, 214, 214);
    pointer-events: none;
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    opacity: 0;
    transition: all 0.1s;
    transform: translateX(60px);
}

.menu__item-link:hover ~ .marquee .marquee__inner {
    opacity: 1;
    transform: translateX(0px);
    transition-duration: 0.4s;
}

.menu__item-link,
.marquee span {
    white-space: nowrap;
    font-size: 7vw;
    padding: 0 1vw;
    line-height: 1.15;
}

.marquee span {
    font-style: italic;
}

I want to implement the navigation menu program into the hamburger menu. I tried several ways but it’s not givig the desired output. The menu bar isn’t even fuctioning. Please help me with this, I’m trying to solve this problem for last 3 days.