Woopy - Best WooCommerce WordPress Theme $69 $39

View Now
Skip to content Skip to sidebar Skip to footer

How to Build a Mobile Header With Layouts in Elementor

When building a mobile header in Elementor, you can customize the display options of individual Layout sections, based on which device they are viewed.

In order to do this, click on the Edit Section button, go to the Advanced tab, and open the Responsive panel.

mobile header

Using the visibility settings, you can decide whether to show or hide your section on the desktop, tablet, or mobile devices.

Here’s the full list of available resolutions:

  • Desktop – larger than 1680px
  • Notebook – from 1168px to 1679px
  • Tablet – from 768px to 1167px
  • Mobile – lesser than 767px

You may also choose an independent mobile header style in Theme panel > Theme options > Mobile. Here is example: 

mobile header in Elementor

That’s it! Now you can easily create the desired mobile header in Elementor

For the Updates

Exploring ideas at the intersection of design, code, and technology. Subscribe to our newsletter and always be aware of all the latest updates.

Leave a comment

Download a Free Theme