Why my hide function is not working in javascript

Question

1.00/5 (1 vote)

See more:

As i am designing the responsive design and in this my hide function is not working. Following is my Solution

What I have tried:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BTES UI HOMEPAGE</title>
    <link rel="stylesheet" href="./style.css" type="text/css" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Georama:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/60c9293ddf.js" crossorigin="anonymous"></script>
</head>
<body>
    <section class="header">
        <nav>
            <a href="index.html"><img src="./Images/a.PNG" alt=""></a>
            <div class="nav-links" id="navLinks">
                class="fa fa-times">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            ^__i class="fa fa-bars" onclick="showMenu()">
        </nav>
<div class="text-box">
<h1>BTES is Now  AVAILABLE VIRTUALLY.</h1>
<p>Online Classes Available for Regular and Industrial Training</p>
<a href="" class="register">Register Now</a>
</div>
    </section>

</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: 'Georama', sans-serif;
}

.header{
    min-height:100vh;
    width:100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(./Images/banner.png);
    background-position:center ;
    background-size: cover;
    position:relative;
}

nav{
    display:flex;
    padding:2%;
    justify-content: space-between;
    align-items: center;
}
nav img{
    width:150px;
}

.nav-links{
      flex:1;
      text-align:right;
}

.nav-links ul li{
    list-style:none;
    display:inline-block;
    padding:8px 12px;
    position:relative;
}

.nav-links ul li a{
    color:#fff;
    text-decoration:none;
    font-size:13px;
}

.nav-links ul li::after{
    content:'';
    width:0%;
    height:2px;
    background:#f44336;
    display:block;
    margin:auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after{
    width:100%;
}

.text-box{
    width:90%;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
}

.text-box h1{
    font-size: 62px;
}

.text-box p{
    margin:10px 0 40px;
    font-size:14px;
    color:#fff;
}

.register{
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border:1px solid #fff;
    padding:12px 34px;
    font-size:13px;
    background:transparent;
    position: relative;
    cursor:pointer;
}

.register:hover{
    border:1px solid #f44336;
    background:#f44336;
    transition: 1s;
}

nav .fa{
    display:none;
}

@media(max-width:700px){
    .text-box h1{
        font-size: 20px;
    }
    .nav-links ul li{ 
        display:block;
    }
    .nav-links{
        position:absolute;
        background:#f44336;
        height:100vh;
        width:200px;
        top:0;
        right:-200px;
        text-align:left;
        z-index: 2;
        transition: 1s;
    }
    
    nav .fa{
        display:block;
        color:#fff;
        margin:10px;
        font-size:22px;
        cursor:pointer;
    }

    .nav-links ul{
        padding:30px;
    }
}

JavaScript

var navLinks = document.querySelector("#navLinks");
         function showMenu() {
           navLinks.style.right ="0";
         }
         function hideMenu(){
           navLinks.style.right ="-200";
         }

Posted 10-Aug-21 11:42am

Jaskirat Singh 2021

Updated 11-Sep-21 16:54pm

Add a Solution

2 solutions

Solution 2

I Simply removed this and it worked

Posted 11-Sep-21 16:54pm

Member 15354866

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-08-10T21:59:00

Quote:

JavaScript

function hideMenu(){
    navLinks.style.right ="-200";
}

You haven't specified a unit for that value. The browser doesn't know what -200 is supposed to represent.

Change it to match your CSS declaration:

JavaScript

function hideMenu(){
    navLinks.style.right ="-200px";
}

Alternatively, change your Javascript to toggle a CSS class on the element, and use CSS to style the element based on the presence or absence of that class.

Why my hide function is not working in javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us