With Elementor Pro, you can create a custom header on your WordPress site. In most cases, Elementor users add a navigation menu on the custom header they create. The problem is, the header often looks cluttered on the mobile device in some cases. The position of the mobile menu (the hamburger icon) and other elements on the header look asymmetric.
To make your header look tidier on the mobile device, you can set a custom position for the mobile menu and other elements on the header. How to do so?
How to Set Custom Position for Mobile Menu in Elementor
First off, edit your header template with Elementor and set the preview mode to Mobile.
Select one of the widgets on the header template (you can use Navigator to ease your job). In this example, we will fix the position of the Nav Menu widget (as you can see on the screenshot below).
With the Nav Menu widget selected, go to the Advanced tab on the left panel and open the Positioning block. Set the Width to Inline (auto) and Position to Absolute. You can then set the offset of the horizontal orientation and the vertical orientation. Set the offset until you get an appropriate position.
You can try different combinations of the horizontal offset and the vertical offset until you get an appropriate position. This is a bit challenging job and it takes a bit of patience to get the appropriate position. You can also go to the Content tab to try to enable/disable the Full Width option on the mobile Mobile Dropdown section.
Once you are done setting the position of the Nav Menu widget, you can repeat the step above on other widgets on the header. If you still not getting the position you want, try to set the Width to Custom and try different width values. Good luck!