Header layout of Air theme

There are 19 options for the header layout of Air WordPress theme. Please follow this tutorial to config the header layout.

Header layouts

On admin panel the left hand, click “Air Theme > Theme Options > Header”, you will see Header options:

Header layout of Air theme

The sub-menu cannot be shown in the “Corner menu” layout.

Header Size

You could define the header size by the options:

  • Header & Footer Width –
    Fluid width: Header & Footer will be the same as 100% width as the view except the left/right padding.
    Fixed width: It will be with a fixed-width set in the  Primary Container.
  • Header & Footer Fluid Padding – If you select the Fluid Width, you could define the fluid padding. Please enter a number, the default is 60. It will work for the Desktop. The default padding is 20 for Mobile.
  • Header Height – Please enter the integer number. The default for Desktop is 140, for Mobile is 80

Header layout for mobile

Show Menu Icon on Header, it is the classic layout(logo + hamburg icon) for the mobile, the menu panel will be expanded if the hamburg icon is clicked.

If you choose one of the 4 layouts:

The expanded menu layout of the mobile would be the same as the layout of the desktop:

Show Menu Items on Header, the menu items would be listed on the header bar by default. It is not suitable to show many items for this layout. It doesn’t support sub-menu.

Show Menu Items on Header – Logo Center, the menu items would be listed on the header bar by default also. The logo and menu items would be aligned center.

Header Bar Sticky Options

To define the Sticky(fixed) Header bar, please go to ART Theme > Theme Options > Header.

 There are 3 options:

  • None: there is not any sticky effect.
  • Always Sticky: the header will be sticky when page scrolling.
  • Sticky when scrolling back: the header will be sticky when page scrolling to top.

You could set height for sticky header bar. Please enter the integer number. It will be shown by the default size if they are empty.


How to disable the Header animation from the top?

Was this article helpful?

Related Articles