Rural Blog docsAll pages

Header layout

Appearance → Customize → Header → Header layout.

The bar holds up to five things: the logo, the primary menu, the social links, the search icon and the call-to-action button. The layout decides how they are arranged. It is a picture-radio, so you can see each one before choosing.

The three layouts

Logo left (default)

Logo at the left, then everything else packed to the right: the menu, then the social links, search and button as a group.

The workhorse. It reads left to right in the order a visitor scans, and it is the only layout that keeps the whole bar on one line at any height.

Logo center

Logo centred. The menu goes to one side of it, the social/search/button group to the other.

Best when the site name is the brand and the menu is short — four or five items. A long menu on this layout unbalances the two sides and starts wrapping.

Logo row on top, with the social links, search and button; the primary menu gets its own full-width row underneath.

Pick this when the menu is too long to sit beside the logo, or when you want the menu to read as a band across the page. The theme pads the page down to clear the extra row automatically, so nothing is covered by the fixed bar.

Two details specific to Nav below:

What is the same in all three

Height Header height — 50px to 120px, 60px default
Colours Header skin and the two pickers under it
Sticky Sticky header — on by default
Mobile Below the tablet breakpoint every layout collapses to a logo, a hamburger, and the off-canvas panel

Where the option lives

Header layout sits in the Header section, not Design → Header, because it is an arrangement you choose rather than a colour or a font. The same section holds the search toggle, the social toggle and the button; Design → Header holds the skin, colours, height, border and menu typography. Each section links across to the other at the top of its panel.