Issue with Nav Bar Toggle not changing text to white color

Query

I'm baffled as to why the text in the navigation bar (when opened with the Burger Menu) refuses to turn white. I've exhausted all efforts to change the color to white.

Please assist me in pinpointing why the text remains unaffected when the hamburger menu is activated.

Snippet of My Code

//Nav Bar

const navSlide = () =>{
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

// Toggle Nav
    burger.addEventListener('click',()=>{
        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`
        }
   
    })
    //Burger Animation

    burger.classList.toggle('toggle');

})

}

navSlide();
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;

}

.logo{
    color: #245871;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links{
    display: flex;
    justify-content: space-around;
    width: 50%;
    
}

.nav-links li{
   list-style: none;
}

.nav-links a{
    color: #245871;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 18px;

}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #245871;
    margin: 5px;
    transition: all 0.3s ease;
}

.burger{
    display: none;
    cursor: pointer;
}


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

@media screen and (max-width: 997px){
   body{
       overflow-x: hidden;
   }
   
   nav{
       color: white;
   }

   .test{
       color: white;
   }
    .nav-links{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #245871;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links a li{
        opacity: 1;
        color: white;
    }
    .burger{
      display: block;
    }
}

.nav-active{
    transform: translateX(0%);
    color: white;
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    } to {
        opacity: 1;
        transform: translateX(0px);
    }
}


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

.toggle .line2{
    opacity: 0;
}

.toggle .line3{
    transform: rotate(45deg) translate(-5px, 6px);
}
 <body>
       
        <nav>
            <div class="logo">
                    <h4>Website</h4>    
            </div>
            <ul class="nav-links">
                <li class=".test"><a href="#">xxxx</a></li>
                <li class=".test"><a href="#">xxx</a></li>
                <li><a href="#">xxxx</a></li>
                <!-- browsers -->
                <li><a href="#">Free xxx</a></li>
                <li><a href="#">xxxx</a></li>
            </ul>
            <div class="burger">    
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>

            </div>
        </nav>

Your Assistance Is Highly Valued!

The issue seems to be related to the additional classes that are not effectively applying changes as intended through media queries.

Answer №1

Update the following CSS code:

.nav-links a li{
    opacity: 1;
    color: white;
 }

to this:

.nav-links li a{
    opacity: 1;
    color: white;
}

Make sure to maintain the correct order of mentioning the CSS selector.

The code currently mentions .nav-links a li, but the correct order is .nav-links li a.

Adjusted Snippet below:

//Nav Bar

const navSlide = () =>{
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

// Toggle Nav
    burger.addEventListener('click',()=>{
        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`
        }
   
    })
    //Burger Animation

    burger.classList.toggle('toggle');

})

}

navSlide();
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;

}

.logo{
    color: #245871;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links{
    display: flex;
    justify-content: space-around;
    width: 50%;
    
}

.nav-links li{
   list-style: none;
}

.nav-links a{
    color: #245871;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 18px;

}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #245871;
    margin: 5px;
    transition: all 0.3s ease;
}

.burger{
    display: none;
    cursor: pointer;
}


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

@media screen and (max-width: 997px){
   body{
       overflow-x: hidden;
   }
   
   nav{
       color: white;
   }

   .test{
       color: white;
   }
    .nav-links{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #245871;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li a{
        opacity: 1;
        color: white;
    }
    .burger{
      display: block;
    }
}

.nav-active{
    transform: translateX(0%);
    color: white;
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    } to {
        opacity: 1;
        transform: translateX(0px);
    }
}


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

.toggle .line2{
    opacity: 0;
}

.toggle .line3{
    transform: rotate(45deg) translate(-5px, 6px);
}
<body>
       
        <nav>
            <div class="logo">
                    <h4>Website</h4>    
            </div>
            <ul class="nav-links">
                <li class=".test"><a href="#">xxxx</a></li>
                <li class=".test"><a href="#">xxx</a></li>
                <li><a href="#">xxxx</a></li>
                <!-- browsers -->
                <li><a href="#">Free xxx</a></li>
                <li><a href="#">xxxx</a></li>
            </ul>
            <div class="burger">    
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>

            </div>
        </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for a sophisticated approach in Spring MVC to manage the escaping and unescaping of strings being passed to the Front End

Currently, I am in the process of developing a web application utilizing Spring MVC. This project involves retrieving multiple objects from the Database, each containing strings as attributes. It's worth noting that I have no control over the format o ...

What is the process to determine which section of the image is shown when I hover over it?

I have implemented colorbox for popups on my website located at in the "OUR PORTFOLIO" section. I customized the default images for previous, next, and close buttons, but when I hover over them, they display the wrong parts of the image. I'm unable t ...

How can you retrieve the preceding sibling using an Angular directive?

Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple example: import { Directive, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export c ...

How can you incorporate AJAX to add a paragraph element to your HTML document?

I have encountered an issue with two files in my project. The first file is an HTML document, while the second file is a PHP file called ajax_access_database.php. Originally, I intended for the PHP file to access a database, but complications arose, leadin ...

Deactivating the idle timer in React Native: A Step-by-Step Guide

Currently, I am working on an app that involves a timer using RN. However, I have noticed that after approximately 1 minute and 50 seconds, the device's screen starts to dim in preparation for sleep mode. ...

Highcharts - problem with chart width being fully rendered

I am currently using a Highcharts column chart and I am looking to make it a fully responsive chart with 100% width. The container for the chart is a simple <div> without any additional formatting. Upon document load, the chart remains at a fixed wid ...

How can I convert XSLT XML to HTML, specifically matching elements that begin with 'n' but exclude those containing 'name'?

Encountered a puzzling issue here. The source XML looks like this: <n0>Hello1</n0> <n1>Hello3</n1> <name>Hello2</name> I have figured out that I can utilize <xsl:template match="*[starts-with(name(),'n' ...

NextJS rendering props in a loop

I need help figuring out how to render props in a loop using the forEach function. This is my current code: {console.log('the catalog inside the component ----->', catalog)} {Object.keys(catalog).forEach(key => { return ( <d ...

The implementation of gulp-less encounters issues when the !important rule is applied

When the !important declaration is used on a specific less variable, it causes the build to fail. The use of !important is common in our codebase, so it's puzzling why this particular instance is causing an issue. Setup: customer1.less @import "bas ...

Navigating the Terrain of Mapping and Filtering in Reactjs

carModel: [ {_id : A, title : 2012}, {_id : B, title : 2014} ], car: [{ color :'red', carModel : B //mongoose.Schema.ObjectId }, { color ...

Some of the picture remains concealed without spilling over

I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

Currently, I am encountering an issue in my project where I am receiving a ReferenceError: localStorage is not defined. The technologies I am using for this project are Nextjs, Redux, and Typescript. https://i.stack.imgur.com/6l3vs.png I have declared ...

What option would suit Django comet the best?

Combining Django with Orbited, Stomppy server, and Apache OR Using Django with Eventlet and Spawning web server Are Orbited and Stomppy considered outdated in this context? If anyone knows of a more updated and efficient solution, preferably with a com ...

What is the correct method for retrieving values from a JSON array?

To extract information from a JSON file, I have created a function as shown below: function getarray(){ $http.get('http://localhost/prebuilt/countries.json') .success(function(data) { $scope.countries = data; }); return data; } Howe ...

Revamping JavaScript Code for Better Performance

I've been working on a lot of code in the backend section of my website, mainly dealing with CRUD operations using AJAX calls. Do you have any suggestions on how I can refactor these functions into more generic ones or possibly create classes instead ...

What is the best way to transfer information from a view to a controller in Laravel using AJAX?

I am facing an issue with sending data from the view to the controller in Laravel version 7 I am sending data from a form and ul li elements I have an array of data in JavaScript Here is my HTML code: <ul name="ali" id="singleFieldTags&q ...

After the installation of Storybook, there is a duplicate identifier error that arises with 'LibraryManagedAttributes'

Upon running the command npx storybook@latest init for setting up Storybook, which results in modifying package.json, I encounter an issue where I cannot run the project using npm due to: Error: node_modules/@types/react-dom/node_modules/@types/re ...

Exploring Three.js: Meshes, Triangles, and the Beauty of Lambert

I have a function that generates stars, here is the code: function CreateStar( radius, thickness, isWireframe, starColor) { // material var starMaterial = new THREE.MeshLambertMaterial({ color: starColor, ...

What is the process for creating a widget that can be seamlessly integrated into someone’s website and hosted on your own site

In relation to this previous question. After researching JSONP and conducting some tests, I've realized that I am completely clueless about what I'm doing... What is required? I am developing a customer service tool for people to integrate in ...

Learning to activate music on a webpage using the tab key in HTML

Is there a way to trigger the playback of an mp3 file when the tab key is pressed on a keyboard? I am designing a number system for a restaurant where entering a number and pressing tab will result in a noise being played to bring attention to the numbers ...