Phone nav menu dropdown issue (Elementor)

Hello, Please make sure your Mobile Dropdown -> Fullwidth is set to yes.

See This: https://prnt.sc/du4AKvn4HlG3

https://elementor.com/help/nav-menu-widget-pro/#additional-use-cases

Hi,
Thank you. But it was already set to fullwidth, so that isn’t the issue.

The menu is the full width of its container. But the container is only 50% of the viewport width. To get full viewport width of the menu, both the nav container and icon container need to be full width, meaning they’d stack vertically, which looks odd when the menu is not expanded.

To get the look you’re after, the HTML structure needs modification, it’s not a simple CSS fix. As a compromise, perhaps if you made the icon container 15% and the menu 85% you’ll get closer to the look you’re after without having to modify the HTML structure.

Thanks for the response. Yes, that would get closer to the look that I want. But I guess there should be a different option. Also considering that I don’t have this issue with other websites, which are built in a similar way. So that’s what makes it more weird. If I always had this issue it would make more sense

There could be a way to get what you want with CSS alone, but it gets rather messy. I doubt it was the approach used in your other sites. Obviously something’s different about this site than the others. I couldn’t hazard a guess to what. I also don’t know Elementor very well, my advice was based solely on the HTML and CSS I see.

Similar to what Chinmoy alluded to, there might be a simpler solution within Elementor, but something besides the full width setting. You might try asking in Elementor’s dedicated support forum where its support staff and expert users are in a better position to address Elementor specific issues.