How to Edit Mobile Header in Elementor

There are numerous reasons why you might want to have a unique header for mobile visitors to your WordPress website. For one, almost half of traffic online is now conducted through mobile devices. But mobile devices can rarely showcase the best of your website in the desktop design.

This can be very harmful to the user’s experience. A bad translation of your website from desktop designs to mobile devices can result in your website visitors leaving your website very quickly.

This can result in you losing a lot of traffic and revenue. In some cases, you might lose up to 80% of your traffic.

There are lots of reasons for this. For one, the header might be too large for mobile devices and take too long to load on mobile browsers.

It is really simple to learn how to edit mobile header in Elementor. This is a simple process that can be done by anyone, even those without any technical expertise.

The first step is to design your headers. You can create lots of different editors for your website. Then all you need to do is to enable them on certain devices.

The first step is to log into your WordPress website.

Now you can choose the desktop header section by choosing its section within the Navigator or by clicking the ‘Edit Selection’ button as it appears on the blue grid in the inactive section.

From the Elementor menu on the left, you need to select the option for ‘Advanced Tab’.

From the advanced tab, you need to find and open the Responsive menu options.

Within this tab, you can find the visibility section. There are lots of options in this area and you can select to hide your header on desktop, tablet or mobile options. Depending on what option you have. You can design several headers and have each of them showcased on specific devices.

For instance, you could have a different header for desktop audiences, another for tablets and another for mobile devices.