Skip to content

Orientation and header behavior

Generally, Layouts are better defined by their orientation, and can thus be divided into two main categories: horizontal or vertical. When we talk about the orientation of a layout, we’re actually referring to the arrangement of the logo and navigation combination.

When the logo and the navigation are placed side by side, or generally when they are set to occupy the screen using its width, we’re using an horizontal layout, while when the two of them are stacked one on top of the other and placed on a side of the viewport, we’re using a vertical layout.

Apart from choosing its orientation, a Layout can also be defined by its width, which is the amount of horizontal space being used by the content area of the pages that use the Layout. Concerning the content width, you have two options: you can make the content extend to the browser viewport’s edges (extended layout), or you can make it stay at the center of the browser viewport (boxed layout, using a maximum width of 1104 pixels).

You can set a layout to be automatically used across the entire website by setting it as Master using the Set as master layout toggle. If you only have one Layout, it’ll be automatically set as the Master layout for the website.

Keep in mind that individual posts/pages/post types/archives can override the Master layout, and choose to use a different one for their display.

The Header section of the Layout editing screen is used to define the behavior of the header element. What this means is that you can choose between having:

  1. a static header, that goes away as you scroll down in the page, only to appear again if you go back up,
  2. an absolute header, that is similar to the static variant, with the difference that the header can appear again when you’re scrolled deep down the page,
  3. a fixed header, which is always visible, regardless of the scroll.

The absolute behavior is useful when you need to overlap the header to a page header image that’s placed in the top portion of the page and stretches wide in both directions. There are two types of absolute scrolling behaviors: when a visitor scrolls down or up in the page, you can choose to display a compact version of the header, without the top and bottom bar (if you have any).

If you select any between the absolute or fixed behavioral options, an extra styling setting will be available called Shadow, which will add a soft shadow on the header in its scrolled or regular state.