Animated Hamburger Menu Icon | Position


I added an animation to the existing Hamburger Menu Icon. When you click on it the menu opens and it turns from three lines to X, then when you click on it again the menu closes and it turns to three lines back.

The code that I inserted is a follows:

/*Menu icon change on click */
.btn-menu {


.btn-menu:after {
background-color: #fff;
content: ‘’;
display: block;
height: 4px;
transition: all 200ms ease-in-out;
.btn-menu:before {
box-shadow: 0 10px 0 #fff;
margin-bottom: 16px;
} {
box-shadow: 0 0 0 #fff;
transform: translateY(10px) rotate(45deg);
transform: translateY(-10px) rotate(-45deg);


  1. First problem that I have is the position of the icon, that is not aligned (in center) with my logo text, as it was before I added the code.

I left the first part of code opened to insert the icon positioning:

.btn-menu {


I tried:
position: relative;
position: absolute;

and it didn´t help.

  1. Second problem is when testing the changed menu icon I have also noticed, that if the site is not fully opened, when I click on the menu icon it changes from lines to X but the menu does not open (tested on mobile). Could this be my code problem?

Thank you for your help & Best regards,


1. It looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

2. Mobile menu makes use of JavaScript, so it won’t work before JavaScript files are loaded.

Kind Regards, Roman.
aThemes Support

Ok Roman

I turned it off untill I find the perfect solution. When I do, I will share the code for others.

Thank you & Best regards,

Okay, you are welcome!

And thank you for understanding.

Kind Regards, Roman.
aThemes Support