I am having trouble getting my dropdown to display for the "about us" navigation bar menu. My "patient resources" dropdown works perfectly fine so I'm confused why the "about us" doesn't work. I think I'm overlooking a tiny detail probably. Any help would be greatly appreciated. (I have inserted the css code under snipet code.)
ReactJS
import React, { useState, useEffect, useContext } from "react";
import mainLogo from "../assets/logo/mainLogo.png";
import menuIcon from "../assets/icon/menuIcon.png";
import { BsChevronDown } from "react-icons/bs";
import { FaSistrix } from "react-icons/fa";
import { Container, Col, Row, Nav } from "react-bootstrap";
import { MyContext } from "../myContext";
import { Link } from "react-router-dom";
import "./navBar.css";
const pageSubItems = [
"Patient Resources",
"Insurances",
"Patient Portal",
"FAQ",
"Forms",
];
const aboutSubItems = ["about", "Dr. Isioma Okobah Foundation"];
function NavBar() {
const { isSubmenuOpen, setIsSubmenuOpen } = useContext(MyContext);
const [sideMainNav, setSideMainNav] = useState(false);
const [scroll, setScroll] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
setScroll(true);
}
if (window.scrollY < 50) {
setScroll(false);
}
});
}, []);
const handleMouseOver = (e) => {
const value = e.target.textContent;
if (pageSubItems.includes(value) || aboutSubItems.includes(value)) {
setIsSubmenuOpen(value);
} else {
setIsSubmenuOpen("");
}
};
return (
<>
<header
className={`${scroll ? "site-header sticky-header" : "site-header"}`}
onMouseOver={handleMouseOver}
>
<Container>
<Row className="d-flex align-items-center">
<Col lg={12}>
<div className="header-box">
<div className="site-logo">
<Link to="/">
<img src={mainLogo} className="img-logo" />
</Link>
</div>
<div className="header-menu">
<Nav
className={`${
sideMainNav
? "main-navigation toggle-nav-menu"
: "main-navigation"
}`}
>
<button
className="toggle-btn"
onClick={() => setSideMainNav(!sideMainNav)}
>
<span></span>
<span></span>
<span></span>
</button>
<ul className="header-menu-items">
<li>
<Link to="/">Home</Link>
</li>
<li
className={`${
aboutSubItems.includes(isSubmenuOpen)
? "sub-items show-about"
: "sub-items"
}`}
>
<Link to="/about-us">
About Us
<BsChevronDown
style={{
paddingLeft: "2px",
fontSize: "12px",
fontWeight: 500,
}}
/>
</Link>
<ul className="sub-menu">
<li>
<Link to="/okobah-foundation">Foundation</Link>
</li>
</ul>
</li>
<li>
<Link to="/services">Services</Link>
</li>
<li
className={`${
pageSubItems.includes(isSubmenuOpen)
? "sub-items show-pages"
: "sub-items"
}`}
>
<Link to="#">
Patient Resources
<BsChevronDown
style={{
paddingLeft: "2px",
fontSize: "12px",
fontWeight: 500,
}}
/>
</Link>
<ul className="sub-menu">
<li>
<Link to="/insurances">Insurances</Link>
</li>
<li>
<Link to="/patient-portal">Patient Portal</Link>
</li>
<li>
<Link to="/forms">Forms</Link>
</li>
<li>
<Link to="/office-policy">Office Policy</Link>
</li>
<li>
<Link to="/FAQ">FAQ</Link>
</li>
</ul>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact-us">Contact Us</Link>
</li>
</ul>
</Nav>
</div>
<div className="header-search">
<div className="search-box">
<div className="search-icon">
<a href="#">
<FaSistrix />
</a>
</div>
</div>
<div className="extra-menu">
<div className="extra-menu-icon">
<a href="#">
<img src={menuIcon} alt="image" />
</a>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</header>
</>
);
}
export default NavBar;
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: transparent;
padding: 30px 0;
transition: 0.3s;
z-index: 100;
}
.site-header.sticky-header {
background: white;
padding: 10px 0;
box-shadow: 0 0 20px rgb(0 0 0/ 10%);
transition: 0.3s;
}
.header-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.site-logo {
display: inline-block;
}
.site-logo a {
width: 100%;
}
.img-logo {
height: 70px;
max-width: 100%;
vertical-align: middle;
}
.header-menu {
display: inline-block;
text-align: center;
transition: 0.5s;
}
.header-menu-items {
font-size: 0;
line-height: 1;
list-style: none;
margin: 0;
padding: 0;
}
.header-menu-items li {
font-size: 16px;
line-height: 26px;
display: inline-block;
position: relative;
margin: 0 30px;
}
.header-menu-items li a {
text-decoration: none;
display: inline-block;
font-size: 16px;
line-height: 26px;
color: #010f2e;
font-weight: 600;
font-family: "Jost", sans-serif;
position: relative;
transition: 0.3s;
}
.header-menu-items li a:hover {
color: #ff5066;
}
.sub-items .sub-menu {
position: absolute;
top: 100%;
left: -15px;
width: 200px;
height: auto;
background: #ffffff;
border-radius: 4px;
box-shadow: 1px 1px 60px rgb(0 0 0 / 10%);
display: none;
transition: 0.3s;
padding-left: 0;
}
.header-menu-items .sub-items .sub-menu li {
display: block;
text-align: left;
margin: 0;
border-bottom: 1px solid #ebebeb;
padding: 5px 15px;
}
.show-pages .sub-menu {
display: block;
animation-duration: 1s;
animation-name: slide-up;
}
.show-about .sub-menu {
display: block;
animation-duration: 0.3s;
animation-name: slide-up;
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-search {
display: inline-block;
text-align: right;
font-size: 0;
line-height: 1;
}
.search-box {
display: inline-block;
position: relative;
vertical-align: middle;
}
.search-icon a {
display: inline-block;
font-size: 20px;
color: #777777;
transition: 0.3s;
}
.extra-menu {
display: inline-block;
margin-left: 40px;
vertical-align: middle;
}
.extra-menu-icon {
width: 60px;
height: 60px;
background: linear-gradient(to right, #ff5066, #fc9d44, #fc9d44, #ff5066);
background-size: 400% 100%;
background-position: left center;
justify-content: center;
align-items: center;
border-radius: 4px;
box-shadow: 2px 2px 30px rgb(255 80 102 / 25%);
transition: 0.3s;
text-decoration: none;
padding: 15px;
}
.extra-menu-icon a img {
max-width: 100%;
}
.extra-menu-icon:hover {
background-position: right center;
}
.toggle-btn {
position: fixed;
top: 0;
right: 0;
width: 70px;
height: 70px;
background: linear-gradient(to right, #ff5066, #fc9d44);
text-align: center;
border: none;
outline: none;
display: none;
z-index: 10;
}
.toggle-btn span {
width: 30px;
height: 3px;
background: white;
display: block;
margin: 0 auto 6px auto;
position: relative;
top: 0;
opacity: 1;
transition: 0.3s;
}
@media screen and (max-width: 575px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 991px) {
.site-header {
height: 70px;
padding: 0;
box-shadow: 0 0 20px rgb(0 0 0/10%);
}
.site-logo {
position: fixed;
top: 0;
left: 30px;
width: 200px;
height: 70px;
display: flex;
align-items: center;
}
.toggle-btn {
display: block;
}
.toggle-nav-menu .toggle-btn {
display: block;
background: transparent;
width: 35px;
height: 35px;
top: 1rem;
right: 1rem;
}
.toggle-nav-menu .toggle-btn span {
background: linear-gradient(to right, #ff5066, #fc9d44);
}
.toggle-nav-menu .toggle-btn span:nth-child(1) {
transform: rotate(45deg);
position: relative;
top: 5px;
}
.toggle-nav-menu .toggle-btn span:nth-child(2) {
display: none;
}
.toggle-nav-menu .toggle-btn span:nth-child(3) {
transform: rotate(-45deg);
position: relative;
top: -4px;
}
.header-menu-items {
position: fixed;
top: 0;
right: -400px;
width: 320px;
height: 100vh;
overflow: auto;
background: white;
text-align: center;
padding: 100px 0 30px;
box-shadow: -30px 0 30px rgb(0 0 0 / 10%);
transition: 0.5s;
}
.toggle-nav-menu .header-menu-items {
transform: translateX(-400px);
}
.main-navigation .header-menu-items li {
display: block;
margin: -50px 0 10px 0;
padding: 0 30px;
padding-bottom: 10px;
opacity: 0;
transition: 0.5s;
}
.toggle-nav-menu .header-menu-items li {
margin-top: 0;
opacity: 1;
transition: 0.5s;
transition-delay: 0.4s;
}
.header-search {
display: none;
}
.sub-items .sub-menu {
background-color: #ff50676d;
position: relative;
width: 100%;
margin-left: 1rem;
transition: 0.3s;
}
.header-menu-items .sub-items .sub-menu li {
text-align: center;
}
}
@media screen and (max-width: 1199px) {
.header-menu-items li {
margin: 0 25px;
}
}