Recently, I encountered an issue with my hamburger menu. When I hover over one of the bars, only that specific one changes color and not all of them. I am struggling to figure out how to make all the bars change color when any one of them is hovered over.
How can I make all the hamburger bars change color when any one of them is hovered over?
This is the HTML code for the hamburger menu:
<div className="burger-menu" onClick={updateMenu}>
<div className={burgerClass} ></div>
<div className={burgerClass} ></div>
<div className={burgerClass} ></div>
</div>
Here are the CSS styles for the hamburger menu in Bootstrap 5:
.burger-bar:hover {
background-color: #ff0000;
}
@media (max-width: 550px) {
.burger-menu {
display: inline;
height: 100%;
width: 3em;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
cursor: pointer;
}
.burger-bar {
display: inline;
width: 3em;
height: 0.5em;
background-color: #292f36;
border-radius: 0.5rem;
margin: 2px;
}
.nav-item {
display: none;
}
}
@media (max-width >= 550px) {
.burger-menu {
display: none;
}
.burger-bar {
display: none;
}
}