40 lines
747 B
CSS
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;
|
|
}
|
|
}
|