How to change the style of the navbar on scrolling? - css

Question

I have created a navbar. This navbar should change color when scrolling. I have only managed so far that the background color changes. However, I also want the text colors to change as well as the icons. I would make now with each className the query, whether active or not. But this is very redundant. Is there an option that covers everything? By saying if the user scrolls and the navbar changes color, then the textcolor and everything else should also change? Would it make sense to say if navbar changes then call another new css? Is that possible? If so how do I do that?
Is there an option that makes this easier?
Navbar.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../buttons/Button';
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-logo" onClick={closeMobileMenu}>
APPNAME<i className="fab fa-typo3"></i>
</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='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link to="/services" className='nav-links' onClick={closeMobileMenu}>
Services
</Link>
</li>
<li className='nav-item'>
<Link to="/products" className='nav-links' onClick={closeMobileMenu}>
Products
</Link>
</li>
<li className='nav-item'>
<Link to="/sign-up" className='nav-links-mobile' onClick={closeMobileMenu}>
Sign up
</Link>
</li>
</ul>
{button && <Button buttonStyle='btn--outline'>GET STARTED</Button>}
</div>
</nav>
</>
)
}
export default Navbar
Navbar.css
.navbar {
background: #2b41cb;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
/* AS YOU CAN SEE HERE IS THE ACTIVE PART */
.navbar.active {
/*background: linear-gradient(90deg, rgb(66, 2, 194) 0%, rgb(0, 78, 194) 100%)*/
background: #fff;
}
.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;
}
.navbar-logo.active {
color: #232323;
}
.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: transparent;
color: #fff;
padding: 14px 20px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #242424;
transition: 250ms;
}
}
What I would like is for the entire navbar to be in white and the text and icons to be in black when scrolled. If not it should stay as it is, blue background and white font color.

Answer 1

But this is very redundant. Is there an option that covers everything?
Yes, just add a new class name for the element state and then use that class to style everything including the child elements. So in your case you can do:
.navbar {
background: #2b41cb;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.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;
}
/* Active style overrides */
.navbar.active {
background: #fff;
}
.navbar.active .navbar-logo {
color: #232323;
}
Would it make sense to say if navbar changes then call another new css? Is that possible? If so how do I do that?
I think that is also possible, you can use JS to do that but I think adding a state class name is simpler and easier to reason about.