I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div.
You can see how it currently looks by checking out these images: Menu open view and Menu closed view.
The two <a> elements remain stationary and do not transition with the rest of the content.
This is the CSS code snippet:
.wrapper {
position: absolute;
z-index: 100;
top: 0;
left: 0;
height: 100%;
width: 0%;
pointer-events: none;
transition: 0.5s;
}
.wrapper > .BurgerMenu {
display: block;
top: 0;
left: 0;
height: 100%;
background-color: rgb(190, 190, 190);
transition: 0.5s;
position: relative;
z-index: 60;
width: 100%;
}
.BurgerMenu > .BurgerContent {
height: 100%;
width: 100%;
display: flex;
position: absolute;
flex-direction: column;
box-sizing: border-box;
margin: 2rem;
}
.BurgerMenu > .BurgerContent > a {
/* color: rgb(50, 50, 50); */
color: black;
box-sizing: border-box;
position: relative;
}
And this is the corresponding JSX code:
<div ref={ref} className="wrapper">
<div className="BurgerMenu">
<div className="BurgerContent">
{navItems.map((navItem) => (
<a key={navItem.name} onClick={(e) => handleClick(navItem.to)(e)}>
{navItem.name}
</a>
))}
</div>
</div>
</div>