How to create a mobile header with the Ex2-Theme header builder?

Create a mobile header with the Ex2-Theme header builder?

The Ex2-Theme header manufacturer provides a dedicated option to design a mobile header. These options are available with the free version of Ex2-Theme, while the advanced configuration options are only available with Ex2-Theme Pro.

Mobile Header Configuration

Once you have installed your Ex2 theme and its header builder, go to the “Customize” section of your theme.

Step 1: Click the header builder to begin editing.

Step 2: Switch to the tablet or mobile view in the “Customize” section by clicking on the icon associated with the desired device type.

Step 3: You will see a separate dedicated box for a moving header in the visual header generator. The “Off Canvas Menu” section allows you to configure the header elements inside the toggle button. The visual editor on the right side allows you to configure all parts of the mobile header by defining your main header separately (in the center), as well as the top and bottom headers. It is customary to place the logo and the menu toggle button in the main header, but it is quite possible to place these items where you wish in your mobile header.

Step 4: In the “Off-Canvas Menu” section, click the “+” sign to add header items such as the main menu, buttons, widgets, HTML code additions, or others. The out-of-scope section is the section that appears when the user clicks the toggle button.

Step 5: Click the gear icon to access the settings and set the type of mobile header and other options. You can choose the following options for the header type:

About-face
Full screen
Drop down menu

From the Design tab, you will find options for background color and spacing.

Step 6: If you need to change the toggle button, simply click it to configure it.

Step 7: You can enable the transparent mobile header from the editor under Header Builder > Header Types. Choose to view it on mobile and configure it. With Ex2-Theme Pro, you also get the option to create a sticky header (sticky header) that you can configure in the same way

Updated on: 27/03/2023