Strange behavior when trying to apply transforms

I have this link block with two divs that create the x button for a navigation menu as you see in the top right corner of the project link below.

https://preview.webflow.com/preview/playground-819a9a?utm_medium=preview_link&utm_source=designer&utm_content=playground-819a9a&preview=edc02295f0e04ddaeea225e83da07962&workflow=preview

When I select the link block and want to apply a transform (move it 100px to the left), right when I hit the plus button next to transforms effect, the x divs jump out of the nav link block as you can see in the video screenshot below:

This will later on mess up the animation effect that I am trying to do. Why is this happening?

Hi @Waldo and other Webflow experts/staff. Could you please take a look at this and let me know why this behavior is happening?

Hi @Akbar_bakhshi thank you so much for posting this question about animating the hamburger menu in your Webflow site!

First, I would strongly recommend using the Navbar element, rather than a custom element. This will allow you to use the open and close animation trigger for the navbar. It will also provide the structure to place your custom hamburger inside of the menu button.