Problem:
I’m having trouble with my React Navbar component. When I decrease the screen width, the mobile nav menu opens up, but the #242424 background doesn’t cover the entire width of the page. I’m not sure what I’m missing.
My Code:
Navbar.js:
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button.js';
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const showButton = () => {
if (window.innerWidth <= 850) {
setButton(false);
} else {
setButton(true);
}
};
useEffect(() => {
showButton();
window.addEventListener('resize', showButton);
return () => window.removeEventListener('resize', showButton);
}, []);
return (
<>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo">
Portfolio <i className="fa-solid fa-user-secret" />
</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='/work' className='nav-links' onClick={closeMobileMenu}>
Work
</Link>
</li>
<li className='nav-item'>
<Link to='/skills' className='nav-links' onClick={closeMobileMenu}>
Skills
</Link>
</li>
<li className='nav-item'>
<Link to='/contact' className='nav-links' onClick={closeMobileMenu}>
Contact
</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'>SIGN IN</Button>}
</div>
</nav>
</>
);
}
export default Navbar;
Navbar.css
.navbar {
background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
right: 0;
z-index: 999;
}
.navbar-container {
display: flex;
justify-content: center;
align-items: center;
/* height: 100px; */
max-width: 100%;
}
.navbar-logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
}
.fa-user-secret {
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: 50vw;
justify-content: end;
margin-right: 2rem;
}
.nav-item {
height: 65px;
padding-right: 2px;
}
.nav-links {
color: #fff;
display: flex;
/* align-items: center; */
text-decoration: none;
padding: 3.37rem 0.5rem;
height: 100%;
}
.nav-links:hover {
border-bottom: 4px solid #fff;
transition: all 0.1s ease-out;
}
.fa-bars {
color: #fff;
}
.nav-links-mobile {
display: none;
}
.menu-icon {
display: none;
}
@media screen and (max-width: 850px) {
.NavbarItems {
position: relative;
}
.nav-menu {
display: flex;
flex-direction: column;
width: 100%;
/* height: 60.5vh; */
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
}
.nav-menu.active {
background: #242222;
left: 0;
padding-right: none;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
width: 100%;
/* height: calc(100vh - 80px); */
}
.nav-links {
top: 0;
text-align: center;
padding: 1rem;
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: 0.4rem auto;
border-radius: 4px;
width: 60%;
text-decoration: none;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
padding: 10px 30px;
border: 1px solid #fff;
transition: all 0.3s ease-out;
}
.nav-links-mobile:hover {
background: #fff;
color: #242424;
transition: 250ms;
}
}
App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path='/' exact />
</Routes>
</Router>
</>
);
}
export default App;
What I’ve Tried:
I have tried changing the height of the .nav-menu.active as calc(100vh – 80px);
But then it gives this result:
Somehow, the button is sticking to the bottom.
If you want anything extra to understand, I will provide it immediately!