Display None CSS Rule disabling JS code when removed

Question

EDIT: The mobile query class .Nav contains "display: none;" within it. The javascript code works as intended opening and closing the desired classes. Although the open class is invisible due to the "display:none" in the .Nav class. Once this code is removed, The javascript no longer works. You can view it on my website https://blacklist-rs.com/design/

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   

    .nav{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:99999;
    display:none; /** Code that makes the javascript work **/
/** Once removed, menu displays but javascript doesnt work **/
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="header">    
                <div id="menu-icon"></div>  
                <div class="nav">
                <div class="nav-bg-close"></div> 
                <div class="nav-container">
                    <div class="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
    
    </div>
    </div>
    </body>

It would be nice if you can create a [mre]. It is probably becasue you did not set initial position/visibility for the `.nav-container`. Consider using left: -340px` instead of `translateY (-340px)`. I it still doesn't work, create a jQuery function that close the `nav-container` on page load. — Huy Phạm, Aug 28 '21 at 03:17
Thanks for the reply. When i remove the visibility: hidden css rule, The javascript no longer works. I've done what you have suggested, It works the same as my code. Within the Media Query for mobile, Visibility: hidden is the reason it does not show the menu. Once that rule is removed, The javascript does not work. — Jarrod H, Aug 28 '21 at 03:29
For some reason your provided code doesn't work on my native environment too — Aditya, Aug 28 '21 at 04:18
Yeah, That's the issue I'm facing. I know it doesn't work, but just displaying the code that is required. If you view this in inspect element, you'll see the container opens through highlighting the class on inspect element but its invisible. — Jarrod H, Aug 28 '21 at 04:32
Thanks! Unfortunately, The JavaScript doesn't trigger anything now. And adding the background-color to .nav does still show the colour. — Jarrod H, Aug 28 '21 at 08:38
I've actually removed the .nav css inside the media query as it's not needed. The JS isn't triggering anything though. — Jarrod H, Aug 28 '21 at 08:47

NcXNaV · Accepted Answer · 2021-08-28T10:44:55.687

Note that JS will work as long as these two elements exist: #menu-icon and .nav-container

I've tried removing .nav css inside media query, the JS toggles class nav-open and shows the menu.

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 999;
}

.nav-container {
    position:absolute;
    top:0px;
    left:-340px;
    width: -340px;
    height:100%;
    background-color:#000;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="header">    
                <div id="menu-icon"></div>  
                <div class="nav">
                <div class="nav-bg-close"></div> 
                <div class="nav-container">
                    <div class="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
    
    </div>
    </div>
    </body>

Brilliant, Unfortunately this doesn't work with mine. I'll upload the corrected version & you can inspect element on them. https://blacklist-rs.com/design/ — Jarrod H, Aug 28 '21 at 09:07
Sorry, forgot to mention I didn't move `
` inside `
`. I only removed `.nav` css inside media query — NcXNaV, Aug 28 '21 at 09:14
Yeah, I updated it and doesn't work locally or on my website.. I have additional CSS in the media query & the navigation are on separate style pages. — Jarrod H, Aug 28 '21 at 09:24
Have you updated it to your site? Because what I see here: menu-icon is still inside **nav** div? — NcXNaV, Aug 28 '21 at 10:43
I've just checked the site. Do you also need `nav-bg-close`? If you remove it, it will trigger toggle, but right now that div is covering the icon so it's not clicked. — NcXNaV, Aug 28 '21 at 15:16
Yeah it's updated, It's probably cache that is not making it updated. I intend on using nav-bg-close to close the menu without having to click the X icon — Jarrod H, Aug 29 '21 at 02:56
Everything works perfect, Added another function to close it using the #close id. Next objective is to create an off-screen tap to close the menu. Appreciate all the help! Thank you! — Jarrod H, Aug 29 '21 at 04:16

Display None CSS Rule disabling JS code when removed

1 Answers1