Responsive Header Layout Customization using Elementor

One of the most important features of Elementor is the Responsive options that we can use to build the perfect layout for mobile devices.

First navigate to your WordPress admin dashboard -> Creativo Elements -> Headers and Edit one of the existing Header layouts. If there are currently no headers created, follow this tutorial to create your first header.

Accessing the Responsive Layout is done by clicking the Responsive Mode button located in the bottom left area of your browser window.

Clicking the Responsive Mode button will allow us to view our Header layout on Tablet as well as Smartphones.

The Navigation Menu will automatically use a Mobile layout if the option is enabled. The Navigation Menu can be disabled from appearing on Mobile devices (tablets, smartphones).

Alternatively we can disable the entire Section element of the Header, for Table and Smartphone and add a new Section element that will be used ONLY for Mobile devices – tablet and smartphone.

For this example we will keep the current Desktop layout for mobile devices as well.

The Navigation Menu provides customization option for the Mobile Menu under the Style tab -> Mobile Menu.

Switching to Smartphone will create a small issue, because the two columns inside the Section will no longer appear on the same line:

We can easily change the settings of the columns to have them both appear on the same line.

First click on the Column holding the Logo element.

Under Layout -> Column Width -> enter 60.

This means that for small mobile devices, the Column will use 60% of the Row width.

Now click on the Column holding the Navigation menu element.

Under Layout -> Column Width -> enter 40.

This means that for small mobile devices, this Column will use 40% of the Row width.

Now we should have both elements on the same line/row: