There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating.
.bm-menu {
background-color: rgba(255, 255, 255, 0.9);
height: 60vh;
position: fixed;
transition: top 0.3s;
top: 50px;
right: 0;
left: 0;
width: 100%;
border-radius: 30px;
z-index: 1001;
}
<div className="bm-menu">
<Menu isOpen={menuOpen} onStateChange={({ isOpen }) => toggleMenu(isOpen)}>
<div className="menu-content">
<a className="menu-item" href="#">Login</a>
<Link to="/about" className="menu-item">About Us</Link>
<a className="menu-item" href="#">Membership Plans</a>
<Link to="/contact" className="menu-item">Contact Us</Link>
</div>
</Menu>
</div>
Despite setting the height to 60vh as intended, it appears that there is an extra layer above the desired height that extends down the full viewport.
Do you have any recommendations or suggestions for resolving this issue?
I have attempted numerous solutions without success.