Código HTML Ícone
<input type="checkbox" id="nav-control" class="lytbox-nav_control">
<label for="nav-control" class="lytbox-button">
<div class="hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</label>
<nav class="lytbox-navigation">
</nav>
Caixas de ícone
/* icone do menu e fechar */
.lytbox-button {
--hamburger-color: white;
--close-x-color: white;
display: block;
height: 18px;
cursor: pointer;
position: relative;
z-index: 101;
}
/* secao em 100% de largura */
.elementor-2164 {
width: 100%;
}
/* end editing */
.lytbox-navigation {
position: fixed;
top: 0;
left: 0;
transform: translateX(100%);
overflow: hidden;
transition: transform 0.6s;
width: 100%;
height: 100vh;
z-index: 100;
}
.lytbox-navigation {
display: flex;
justify-content: center;
align-items: center;
}
/* toggle hamburger*/
.lytbox-button .hamburguer {
position: relative;
}
.lytbox-button .hamburguer span{
display: block;
height: 2px;
width: 32px;
background: var(--hamburger-color);
transform-origin: 50% 50%;
transition: all 0.1s 0.2s ease, transform 0.2s ease;
border-radius: 20px;
}
.lytbox-button .hamburguer span:nth-child(2) {
transform: translate(0, 7px);
}
.lytbox-button .hamburguer span:nth-child(3) {
transform: translate(0, 14px);
}
.lytbox-nav_control {
position: absolute;
left: -9999px;
width: 100%;
clip: rect(0, 0, 0, 0);
}
.lytbox-nav_control:checked~.lytbox-navigation {
transform: translateX(0);
opacity: 1;
transition: transform 0.6s;
}
.lytbox-nav_control:checked~.lytbox-button .hamburguer {
transition: all 0.1s 0s ease;
}
/* closed X */
.lytbox-nav_control:checked~.lytbox-button .hamburguer span {
background: var(--close-x-color);
transition: all 0.1s ease, transform 0.1s 0.2s ease;
}
.lytbox-nav_control:checked~.lytbox-button .hamburguer span:first-child {
opacity: 0;
}
.lytbox-nav_control:checked~.lytbox-button .hamburguer span:nth-child(2) {
transform: translate(0, 6px) rotate(45deg);
}
.lytbox-nav_control:checked~.lytbox-button .hamburguer span:nth-child(3) {
transform: translate(0, 4px) rotate(-45deg);
}