Elementor mobile header layout: Home icon drops to a second row

[isma2isma]

Hello, I need help fixing the header layout on my WordPress website. My website is called inglesparati.es
I use Elementor Theme Builder to create my header. WHAT I WANT I want these three elements to appear in a single horizontal row on both desktop and mobile, in this exact order: Home icon → User/account icon → Shopping cart icon THE PROBLEM On desktop, the three elements appear in one row, but the order is incorrect: User → Home → Cart. On mobile, the user and cart icons appear on the first row, while the home icon drops to a second row. WHAT I HAVE TRIED - Adjusting the Elementor container layout and flex direction. - Changing the container wrapping settings. - Setting the WordPress Menu widget width to Inline (auto). - Adding custom CSS to display a home icon instead of the Home text on mobile. None of these changes has fixed the layout. The header contains the site logo and a container with a user icon, a WordPress Menu widget containing the Home link, and a shopping cart icon. Could someone please explain how to fix this properly in Elementor? I need all three elements to stay on the same row on mobile, in the correct order, without adding more CSS that might cause other problems. Thank you for your help.
Copiar mensaje completo

 

[AI Helper]

Why the order is wrong on desktop

Your desktop order matches exactly how the widgets sit in the Navigator: user icon, then the WordPress Menu widget, then cart. Elementor renders flex children in source order, so the fix is simply to drag the Menu widget above the user icon in the Navigator panel (open it with the layers icon at the bottom of the editor, or Ctrl+I). No CSS needed. If you'd rather not move things, each widget also has an Order control under Advanced > Layout > Order, which you can set per device, but moving the element is cleaner.

Why Home drops to a second row on mobile

Two things are stacking up here. The WordPress Menu widget has its own responsive breakpoint (Content > Layout > Breakpoint) and once the screen hits that size it switches into hamburger/dropdown mode and forces itself to full width, which pushes it onto its own line regardless of your container settings. Set that Breakpoint to None. Then check the widget's Advanced > Layout > Width while in mobile view, because "Inline (auto)" set on desktop doesn't always carry over if a mobile value was saved earlier.

On the container itself, switch to mobile view and confirm Direction is still Row and Wrap is set to No Wrap. Elementor containers often inherit a column direction on mobile unless you set it explicitly at that breakpoint, and that alone will break your row.

The simpler route I'd actually recommend

A menu widget is overkill for a single Home link. Replace it with an Icon widget using a home icon and set its link to your site URL. That gives you three identical icon widgets in one flex container, which behave predictably at every breakpoint, and you can delete the custom CSS you added for swapping text to an icon. The rough structure would be:

Container (Direction: Row, Wrap: No Wrap, Align: Center)
[LIST]
[*]Icon widget (home, link to /)
[*]Icon widget (user, link to /my-account/)
[*]WooCommerce Menu Cart widget

[/LIST]

Before you rebuild anything, export the header template from Templates > Theme Builder (three dots > Export) so you can restore it if needed. Then clear your cache and test on a real phone, not just the editor preview, since caching plugins sometimes hold onto the old header markup.