Best Consulting WordPress Theme $69 $29

View Now
Skip to content Skip to sidebar Skip to footer

Adding Mobile Header

Looking for some ways to add mobile header? There are 2 ways to add a header for mobile devices on your site:

  • via header Layouts
  • in the Customizer

Creating a Header for Mobile Devices in Layouts

Layouts is a preferred way of creating a header since it gives you flexibility and control over your elements. It is similar to creating a standard header, except there are several features you should know about in order to use Layouts more efficiently.

Feel free to check our video tutorial for more information on customizing layouts. 

Layouts Menu Shortcode

The Layouts: Menu shortcode includes an option to enable the mobile menu. Use it to transform your regular menu into a mobile menu on smaller resolutions automatically.

Hide Layout shortcodes on specific devices

In the settings of each Layout shortcode, you can find an option to hide it on a specific resolution.

You can also show/hide an entire row on a specific resolution. In the Row settings, go to the Custom Layouts tab.

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

In this way, you can create independent mobile layout by disabling certain rows on desktop and notebook devices and enabling them on mobiles and tablets.

Adding a Mobile Header in the Customizer

Instead of Layouts, you can use the default header for mobile devices in the Customizer. Enable it in the Mobile Header section in Appearance > Customize > Header.

Please note! This option is visible only if you choose default header style in Appearance > Customize > Header.

This type lets you show/hide such elements as a logo, search form, login link, and shopping cart. You can also use the Additional Info section, a text block where you can add information about your business, such as telephone number, open hours, etc.

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