dominic
Thank you very much for your effort Dominic but i'm looking for the megamenu button and not the off-canvas.
After many hours of searching i found that the file i must edit is mega.php under mod_menu folder.
I created an override and i added this div inside the part of the code that calls font-awsome button class
<div class="meganim"> <label for="check"><input type="checkbox" id="check"/> <span></span><span></span><span></span></label></div>
I hided the font-awsome icon with display: none and i add this css on my custom
.meganim label {
display: flex;
flex-direction: column;
width: 30px;
cursor: pointer;
margin-top: 15px;
}
.meganim label span {
background: #000;
border-radius: 10px;
height: 5px;
margin: 3px 0;
transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.meganim span:nth-of-type(1) {
width: 50%;
}
.meganim span:nth-of-type(2) {
width: 100%;
}
.meganim span:nth-of-type(3) {
width: 75%;
}
.meganim input[type="checkbox"] {
display: none;
}
.meganim input[type="checkbox"]:checked~span:nth-of-type(1) {
transform-origin: bottom;
transform: rotatez(45deg) translate(5px, 1px)
}
.meganim input[type="checkbox"]:checked~span:nth-of-type(2) {
transform-origin: top;
transform: rotatez(-48deg)
}
.meganim input[type="checkbox"]:checked~span:nth-of-type(3) {
transform-origin: bottom;
width: 65%;
transform: translate(9px, -9px) rotatez(45deg);
}
When i click the button it transforms smoothly but it's not toggling the dropdown 🙁 Is it possible that i need to change something to the javascript click-action ?
