Navigation bar displayed incorrectly when scrolling and in mobile view

Question

I have a problem with the navigation bar. When it is at the top it should be transparent and the font color in white as soon as the user scrolls a bit the background of the navigation bar should change to white and the font color to black. This also works except for the mobile view. The icon for the menu is not displayed in black and also if I am at the top (navigation bar is in transparent color) then the mobile menu is also displayed correctly, but if I scroll down a bit and the mobile navigation bar is displayed in white, the mobile navigation bar is displayed in black font which should not be so. How can I solve this problem?

---

---

Navigation bar at the top and transparent

Naivgations bar scrolled and in white

---

MOBILE-VIEW Mobile navigation bar at the top and transparent

Mobile navigation bar at the top and transparent and when you open the menu

Naivgations bar scrolled and in white

Naivgations bar scrolled and in white and you open the menu

The menu bar should be exactly like the one in the image above and the icon should be in black like picture 4

---

---

CODE

Navbar.js

import React, { useState, useEffect } from "react";
import { Button } from "../buttons/Button";
import { Link } from "react-router-dom";
import "./Navbar.css";

function Navbar() {
  const [click, setClick] = useState(false);
  const [button, setButton] = useState(true);
  const [navbar, setNavbar ] = useState(false);

  const handleClick = () => setClick(!click);
  const closeMobileMenu = () => setClick(false);

  const showButton = () => {
    if (window.innerWidth <= 960) {
      setButton(false);
    } else {
      setButton(true);
    }
  };

  useEffect(() => {
    showButton();
  }, []);

  window.addEventListener("resize", showButton);

  const changeBackground = () => {
    if(window.scrollY >= 80) {
        setNavbar(true);
    }
    else {
        setNavbar(false);
    }
};

window.addEventListener('scroll', changeBackground);



  return (
    <>
      <nav className={navbar ? 'navbar active' : 'navbar'}>
        <div className="navbar-container">
          <Link to="/" className={navbar ? 'navbar-logo active' : 'navbar-logo'} onClick={closeMobileMenu}>
            NAME
            <i class="fab fa-typo3" />
          </Link>
          <div className="menu-icon" onClick={handleClick}>
            <i className={click ? "fas fa-times" : "fas fa-bars"} />
          </div>
          <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <Link to="/" className={navbar ? 'nav-links active' : 'nav-links'} onClick={closeMobileMenu}>
                Text 1
              </Link>
            </li>
            <li className="nav-item">
              <Link
                to="/"
                className={navbar ? 'nav-links active' : 'nav-links'}
                onClick={closeMobileMenu}
              >
                Text 2
              </Link>
            </li>
            <li className="nav-item">
              <Link
                to="/"
                className={navbar ? 'nav-links active' : 'nav-links'}
                onClick={closeMobileMenu}
              >
                Text 3
              </Link>
            </li>

            <li>
              <Link
                to="/"
                className="nav-links-mobile"
                onClick={closeMobileMenu}
              >
                BUTTON
              </Link>
            </li>
          </ul>
          {button && <Button buttonStyle="btn--primary">BUTTON</Button>}
        </div>
      </nav>
    </>
  );
}

export default Navbar;

Navbar.css

.navbar {
    /*background: #2b41cb;*/
    background: transparent;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    margin-bottom: -80px;
  }
 

  .navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    max-width: 1500px;
  }

  
  
  .navbar-logo {
    color: #fff;
    justify-self: start;
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
  }

  
  .fa-typo3 {
    margin-left: 0.5rem;
    font-size: 1.8rem;
  }
  
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    list-style: none;
    text-align: center;
    width: 60vw;
    justify-content: end;
    margin-right: 2rem;
  }
  
  .nav-item {
    height: 80px;
  }
  
  .nav-links {
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    height: 100%;
  }
  
  .nav-links:hover {
    border-bottom: 4px solid #fff;
    transition: all 0.2s ease-out;
  }
  
  .fa-bars {
    color: #fff;
  }
  
  .nav-links-mobile {
    display: none;
  }
  
  .menu-icon {
    display: none;
  }
  
  @media screen and (max-width: 960px) {
    .NavbarItems {
      position: relative;
    }
  
    .nav-menu {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 90vh;
      position: absolute;
      top: 80px;
      left: -100%;
      opacity: 1;
      transition: all 0.5s ease;
    }
  
    .nav-menu.active {
      background: #242222;
      left: 0;
      opacity: 1;
      transition: all 0.5s ease;
      z-index: 1;
    }
  
    .nav-links {
      text-align: center;
      padding: 2rem;
      width: 100%;
      display: table;
    }
  
    .nav-links:hover {
      background-color: #fff;
      color: #242424;
      border-radius: 0;
    }
  
    .navbar-logo {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(25%, 50%);
    }
  
    .menu-icon {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(-100%, 60%);
      font-size: 1.8rem;
      cursor: pointer;
    }
  
    .fa-times {
      color: #fff;
      font-size: 2rem;
    }
  
    .nav-links-mobile {
      display: block;
      text-align: center;
      margin: 2rem auto;
      border-radius: 4px;
      width: 80%;
      text-decoration: none;
      font-size: 1.5rem;
      background-color: goldenrod;
      color: #fff;
      padding: 14px 20px;
      border: 1px solid goldenrod;
      transition: all 0.3s ease-out;
      border-radius: 25px;
    }
  
    .nav-links-mobile:hover {
      background: goldenrod;
      transition: 250ms;
    }
  }

  /* NAVBAR ACTIVE */
   
  .navbar.active {
    /*background: linear-gradient(90deg, rgb(66, 2, 194) 0%, rgb(0, 78, 194) 100%)*/
    background: #fff;
    border-bottom: 2px solid #e8e8e8;
  }
  

  .navbar-logo.active {
    color: #000;
  }


  .nav-links.active {
    color: #000;
  }

  .nav-links.active:hover {
    border-bottom: 4px solid #000;
    transition: all 0.2s ease-out;
  }

---

Is not necessary, but for it to run

HeroSection.js

import React from 'react';
import '../../App.css';
import { Button } from '../buttons/Button';
import './HeroSection.css';



function HeroSection() {



  return (
    <div className='hero-container'>
      <h1>Heading One</h1>
      <p>Some Text!</p>
      <div className='hero-btns'>
        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
        >
          BUTTON 1
        </Button>
        <Button
          className='btns'
          buttonStyle='btn--primary'
          buttonSize='btn--large'
        >
          BUTTON 2 <i className='far fa-arrow-alt-circle-right' />
        </Button>
      </div>
    </div>
  );
}

export default HeroSection;

HeroSection.css

video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
  }
  
  .hero-container {
    background: rgba(102, 232, 255, 0.849);
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);*/
    object-fit: contain;
  }
  
  .hero-container > h1 {
    color: #fff;
    font-size: 100px;
    margin-top: -100px;
  }
  
  .hero-container > p {
    margin-top: 8px;
    color: #fff;
    font-size: 32px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
      'Lucida Sans', Arial, sans-serif;
  }
  
  .hero-btns {
    margin-top: 32px;
  }
  
  .hero-btns .btn {
    margin: 6px;
  }
  
  .fa-play-circle {
    margin-left: 4px;
  }
  
  @media screen and (max-width: 960px) {
    .hero-container > h1 {
      font-size: 70px;
      margin-top: -150px;
    }
  }
  
  @media screen and (max-width: 768px) {
    .hero-container > h1 {
      font-size: 50px;
      margin-top: -100px;
    }
  
    .hero-container > p {
      font-size: 30px;
    }
  
    .btn-mobile {
      display: block;
      text-decoration: none;
    }
  
    .btn {
      width: 100%;
    }
  }

Home.js

import React from 'react';
import '../../App.css';
import Cards from '../cards/Cards';
import Footer from '../footer/Footer';
import HeroSection from '../Hero/HeroSection';
import Box from '../box/Box';

function Home() {
    return (
        <>
            <HeroSection></HeroSection>
            
        </>
    )
}

export default Home;

App.js

import React from 'react'
import Navbar from './components/navbar/Navbar'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/pages/Home';
import './App.css'


function App() {
  return (
    <>
      <Router>
      <Navbar/>
      <Switch>
          <Route path='/' exact component={Home} />
      </Switch>
      </Router>
    </>
  );
}

export default App;

Answer 1

may you need different class for you different Navigation button in different situation added it dynamically:)

Answer 2

window.addEventListener("resize", showButton);

  const changeBackground = () => {
     let scrollClass = '';
    if(window.scrollY >= 80) {
        setNavbar(true);
        scrollClass = 'black';
    }
    else {
        setNavbar(false);
        scrollClass = '';
    }
    this.setState({ scrollClass });

<div className="menu-icon" onClick={handleClick}>
     <i className={`click ? "fas fa-times" : "fas fa-bars" ${this.state.scrollClass }`} />
</div>