When the hamburger is clicked on mobile devices, I want my navbar items to have a full background-color display that only shows the logo, the hamburger icon, and the navigation items. The main content of the landing page should be hidden unless the hamburger menu is closed.
1 Here is an image of what I am trying to achieve on mobile:
https://i.sstatic.net/18wM9.jpg
- This is how it currently looks: [![
Below is the code for my Navbar.js:
import React, { useState } from "react";
import { FiMenu, FiX } from "react-icons/fi";
import { Link } from "react-router-dom";
export default function Navbar() {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen(!open);
};
const closeMenu = () => {
setOpen(false);
};
return (
<div className="navigation">
<nav className="navbar">
<Link to="/" className="nav-logo" >
ESEOWIE{" "}
</Link>
<div onClick={handleClick} className="nav-icon">
{open ? <FiX /> : <FiMenu />}
</div>
<ul className={open ? "nav-links active" : "nav-links"}>
{/* <li className="nav-item">
<Link to="/" className="nav-link" onClick={closeMenu}>
Homepage
</Link>
</li> */}
<li className="nav-item">
<Link
to="/career"
className="nav-link" onClick={closeMenu}
>
Political Career
</Link>
</li>
<li className="nav-item">
<Link
to="/career"
className="nav-link" onClick={closeMenu}
>
Professional Career
</Link>
</li>
<li className="nav-item">
<Link
to="/academics"
className="nav-link" onClick={closeMenu}
>
Academics Pedigree
</Link>
</li>
<li className="nav-item">
<Link
to="/social"
className="nav-link" onClick={closeMenu}
>
Social Enterprise
</Link>
</li>
<li className="nav-item">
<Link
to="/publications"
className="nav-link" onClick={closeMenu}
>
Publications
</Link>
</li>
<li className="nav-item">
<Link
to="/contact"
className="nav-link" onClick={closeMenu}
>
Contact
</Link>
</li>
</ul>
</nav>
</div>
);
}Here is the CSS code for my Navbar styling:
.navbar {
height: 80px;
width: 100%;
/* background: blue; */
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
font-size: 1.2rem;
}
.nav-logo {
text-decoration: none;
color: white;
width: 101.23px;
height: 9.67px;
font-family: Calibre;
}
.nav-links {
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 20px;
list-style: none;
}
.nav-link {
text-decoration: none;
color: white;
transition: 0.3s all;
}
.nav-link:hover {
color: red;
}
.nav-icon {
display: none;
font-size: 2rem;
cursor: pointer;
}
@media only screen and (max-width: 500px) {
.navbar {
position: relative;
}
.nav-links {
display: flex;
flex-direction: column;
position: absolute;
top: 180px;
left: -100%;
transition: 0.5s all;
}
.nav-links.active {
background: #4D0ADB;
left: 51px;
}
.nav-item {
padding: 10px 0;
}
.nav-icon {
display: flex;
}
}