Menu button in navigation bar not accessible after scrolling down

Issue

I’m currently working on this website project of mine and I have hit a wall. I have noticed that the navigation trigger button (burger button on the top left of the navigation) only works when we are at the start of the page, but as soon as I scroll down even a couple of pixels, it will not respond to any clicks. I have looked everywhere in my code but maybe I just need another pair of eyes to look over my code and see something I might have not spotted.

function closeSideBar() {
    document.getElementById('mysidebar').style.width='0px';
    document.getElementById('navigation').style.marginLeft='0px';
    document.getElementById('content').style.transform="translateX(0px)";
}
function openSideBar(){
    document.getElementById('mysidebar').style.width='190px';
    document.getElementById('navigation').style.marginLeft='190px';
    document.getElementById('content').style.transform="translateX(190px)";
}

function sideBar() {
    if(document.getElementById('mysidebar').style.width==="190px"){
        closeSideBar();
    }
    else{
        openSideBar();
    }
}

const maino = document.getElementById('container');

maino.addEventListener('click', function () {
    if (document.getElementById('mysidebar').style.width==="190px") {
        closeSideBar();
    }
});

$(document).ready(function(){
    $("#jumboref1").hover(function(){
        $("#smallref1").css("color", "#E7AD9C");
    }, function(){
        $("#smallref1").css("color", "#efefef");
    });
    $("#jumboref2").hover(function(){
        $("#smallref2").css("color", "#E7AD9C");
    }, function(){
        $("#smallref2").css("color", "#efefef");
    });
    $("#jumboref3").hover(function(){
        $("#smallref3").css("color", "#E7AD9C");
    }, function(){
        $("#smallref3").css("color", "#efefef");
    });
    $("#jumboref4").hover(function(){
        $("#smallref4").css("color", "#E7AD9C");
    }, function(){
        $("#smallref4").css("color", "#efefef");
    });
    $("#jumboref5").hover(function(){
        $("#smallref5").css("color", "#E7AD9C");
    }, function(){
        $("#smallref5").css("color", "#efefef");
    });
    $("#jumboref6").hover(function(){
        $("#smallref6").css("color", "#E7AD9C");
    }, function(){
        $("#smallref6").css("color", "#efefef");
    });
    $("#jumboref7").hover(function(){
        $("#smallref7").css("color", "#E7AD9C");
    }, function(){
        $("#smallref7").css("color", "#efefef");
    });
    $("#smallref1").hover(function(){
        $("#jumboref1").css("color", "#e7ad9c");
    }, function(){
        $("#jumboref1").css("color", "#232323");
    });
    $("#smallref2").hover(function(){
        $("#jumboref2").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref2").css("color", "#232323");
    });
    $("#smallref3").hover(function(){
        $("#jumboref3").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref3").css("color", "#232323");
    });
    $("#smallref4").hover(function(){
        $("#jumboref4").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref4").css("color", "#232323");
    });
    $("#smallref5").hover(function(){
        $("#jumboref5").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref5").css("color", "#232323");
    });
    $("#smallref6").hover(function(){
        $("#jumboref6").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref6").css("color", "#232323");
    });
    $("#smallref7").hover(function(){
        $("#jumboref7").css("color", "#E7AD9C");
    }, function(){
        $("#jumboref7").css("color", "#232323");
    });
    $("#slide-down").hover(function (){
        $("#label").css("opacity", "1");
        $("#label").css("transform", "translate3d(0,1.5rem,0)");
    },function (){
        $("#label").css("opacity", "0");
        $("#label").css("transform", "translate3d(0,0,0)");
    });
});
@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected];400&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 200;
}

body{
    font-family: 'Raleway', sans-serif;
    background-color: #efefef;

}

.navigation{
    width: 100%;
    height: 3.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1.5rem;
    align-items: center;
    align-content: center;
    background-color: rgba(0,0,0,.92);
    backdrop-filter: blur(20px) saturate(100%);
    color: #efefef;
    position: fixed;
    top: 0;
    transition: 0.3s;
}

.openbtn {
    background-color: rgba(0,0,0,0);
    border: none;
    cursor: pointer;
}

.openbtn:focus {
    border: none;
}

.sidebar{
    width: 0;
    height: 100%;
    position: fixed;
    text-align: center;
    background-color: rgba(0,0,0,.92);
    backdrop-filter: blur(20px) saturate(100%);
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 100px;
    transition: 0.3s;
    white-space: nowrap;
}

.sidebar a {
    text-decoration: none;
    color: #efefef;
    display: block;
    padding: 1rem 1.2rem;
    transition: 0.2s;
}

.sidebar a:hover{
    background-color: #efefef;
    color: #232323;
}

#main {
    transition: 0.3s;
}

.logo{
    font-size: 2rem;
    transition: 0.2s;
}
.logo:hover{
    color: #E7AD9C;
}

.container {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    transition: 0.3s;
}

#content {
    transition: 0.3s;
}

.sec {
    width: 100%;
    height: 100vh;
}
.intro {
    height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.jumbo-banner {
    font-size: 5rem;
    padding-bottom: 4rem;
}

.jumbo-small{
    font-size: 2rem;
    width: 70%;
    color: #efefef;
    text-align: center;
    background-color: #232323;
    padding: 0.5rem;
}
.hoverable {
    transition: 0.3s;
}

.slider{
    width: 5vw;
    height: 5vw;
    transition: 0.3s;
    transform: rotate(45deg);
    margin-top: 10rem;
    border-bottom: 2px solid #232323;
    border-right: 2px solid #232323;
    cursor: pointer;
}

.slider:hover{
    transform: translateY(1rem) rotate(45deg);
}

.slider-label-box{
    padding-top: 2rem;
}

.slider-label{
    background-color: #232323;
    color: #efefef;
    font-size: 1.3rem;
    opacity: 0;
    transition: 0.3s;
}

@media only screen and (max-width:700px) {
    .navigation {
        height: 3rem;
    }
    .container{
        margin-top: 3rem;
    }
    .logo {
        font-size: 1.7rem;
    }
    .jumbo-intro{
        font-size: 1.8rem;
    }
    .jumbo-banner{
        margin-top: 10vh;
        font-size: 3rem;
    }

    .slider{
        width: 10vw;
        height: 10vw;
        margin: 0;
    }

}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<nav class="navigation" id="navigation">
    <span class="nav_item burger">
        <a class="openbtn" onclick="sideBar()">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="17.714" viewBox="0 0 39.118 17.714">
          <g id="hamburger" transform="translate(0.656 0.65)">
            <line id="Line_2" data-name="Line 2" x2="37.807" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
            <line id="Line_3" data-name="Line 3" x2="37.807" y2="0.318" transform="translate(0 8)" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
            <line id="Line_4" data-name="Line 4" x2="37.807" transform="translate(0 16.414)" fill="none" stroke="#efefef" stroke-linecap="round" stroke-width="1.3"/>
          </g>
        </svg>
            </a>
    </span>
    <span class="nav_item logo" id="logo">CEMESAW</span>
    <span></span>
</nav>
<div class="container" id="container">
    <div class="sidebar" id="mysidebar">
        <a href="">HOME</a>
        <a href="">ABOUT US</a>
        <a href="">MEETUP</a>
        <a href="">LOGIN/SIGNUP</a>
    </div>
    <div id="content">
    <section class="sec intro">
        <h3 class="jumbo-banner">
            <span class="hoverable" id="jumboref1">C</span>
            <span class="hoverable" id="jumboref2">E</span>
            <span class="hoverable" id="jumboref3">M</span>
            <span class="hoverable" id="jumboref4">E</span>
            <span class="hoverable" id="jumboref5">S</span>
            <span class="hoverable" id="jumboref6">A</span>
            <span class="hoverable" id="jumboref7">W</span></h3>
        <h6 class="jumbo-small">The
                <span class="hoverable" id="smallref1">Cultural </span>
                <span class="hoverable" id="smallref2">Experience</span>
                of
                <span class="hoverable" id="smallref3">Middle </span>
                <span class="hoverable" id="smallref4">Eastern </span>
                and
                <span class="hoverable" id="smallref5">South </span>
                <span class="hoverable" id="smallref6">Asian </span>
                <span class="hoverable" id="smallref7">Women </span> is an organization with the focus
                of treating issues for women from all walks of life.
        </h6>
        <br>
        <div class="slider" id="slide-down">
        </div>
        <div class="slider-label-box"><h4 class="slider-label" id="label">meet the team</h4></div>
    </section>
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="background.js"></script>
</body>
</html>

Solution

The problem comes from the overlapping of your elements after scrolling. A way to fix this is to work with z-index in the following way:

.navigation{
    z-index: 1;

and

.intro {
    z-index: 2;

JSFiddle available here

Answered By – Antonino

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published