Files
luxury-detailing-maine/css/hamburger.css
T

40 lines
747 B
CSS

#hamburger {
display: none;
flex-direction: column;
cursor: pointer;
background: none;
border: none;
padding: 5px;
}
#hamburger span {
width: 25px;
height: 3px;
background-color: var(--gold);
margin: 3px 0;
transition: 0.3s;
position: relative;
}
/* MOBILE RULES */
@media screen and (max-width: 850px) {
/** hamburger animation */
#hamburger {
display: flex;
}
#hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translateY(10px) translateX(-3px);
width: 24px;
height: 4px;
}
#hamburger.active span:nth-child(2) {
opacity: 0;
}
#hamburger.active span:nth-child(3) {
transform: rotate(45deg) translateY(-10px) translateX(-3px);
width: 24px;
height: 4px;
}
}