You build the header and footer in the Customizer by dragging elements into rows. The preview updates while you work, and nothing goes live until you click Publish.
Open the header builder
- Go to Appearance → Customize → Header.
- The builder opens below the site preview. Use the Desktop and Tablet / Mobile tabs above it to switch between the two headers.
- Click Hide to collapse the builder when it covers the preview, and Header Builder to bring it back.
The Customizer sidebar shows the header's General and Design tabs. General lists the elements in use, followed by Available Items you have not placed yet, and buttons for Transparent Header and Sticky Header. Design holds the Header Background and the screen width where the mobile header takes over.
Rows and zones
The desktop header has three rows: Top Row, Main Row and Bottom Row. Each row has a left, a center and a right zone. Once the center zone holds an element, two more zones appear beside it, left center and right center, for elements that should sit close to the center. A new site starts with the logo on the left and the primary menu on the right of the main row.
The tablet and mobile header has the same three rows with three zones each (left, center and right), plus an Off Canvas area for the slide-out drawer.
To work with the builder:
- Add an element: drag it from Available Items into a zone, or click the + in an empty zone and pick one.
- Move an element: drag it to another zone or row.
- Edit an element: click the gear icon on the element, or its name in the element list.
- Remove an element: click the × on the element. It returns to Available Items.
- Edit a row: click the gear icon at the left end of the row.
An empty row is not shown on the site. Each element can be placed once per header, which is why some come in pairs, such as Button and Button 2.
Row settings
| Setting | What it does |
|---|---|
| Layout | Standard keeps the content at the site width with a full-width background. Fullwidth stretches both. Contained keeps both at the site width |
| Min Height | The minimum height of the row |
| Top Row Background, Main Row Background or Bottom Row Background, Border, Padding | On the Design tab of the row |
Header elements
These elements are available for the desktop header:
| Element | Notes |
|---|---|
| Logo | Logo, site title and tagline. Opens the Site Identity settings |
| Primary Navigation, Secondary Navigation, Third Navigation, Fourth Navigation | Each shows the menu assigned to its location under Appearance → Menus |
| Search | A search icon that opens a search window over the page |
| Search Bar | A search field placed in the header |
| Button, Button 2 | A link styled as a button |
| Social | Icons that link to your social profiles |
| HTML, HTML 2 | Your own text or HTML |
| Account | A login link for logged-out visitors, and an account link or dropdown for logged-in users |
| Contact | Contact details such as a phone number and opening hours |
| Divider, Divider 2, Divider 3 | A divider line between elements |
| Widget area | Shows the Header Area widget area |
| Toggle Widget Area | A button that opens a drawer with the Header Off Canvas widget area |
| Cart | The WooCommerce cart. Available when WooCommerce is active |
| Dark Mode Toggle | A light and dark switch. See Dark mode |
The tablet and mobile header has its own set: Logo, Mobile Navigation, Mobile Navigation 2, Trigger, Search Toggle, Search Bar, Button, Button 2, Social, HTML, HTML 2, Account, Contact, Divider, Divider 2, Toggle Widget Area, Cart and Dark Mode Toggle. Elements with the same name as a desktop element have their own settings, so the phone header can differ from the desktop one.
Desktop and mobile header
Visitors see the desktop header on wide screens and the tablet and mobile header on narrower ones. By default the switch happens at 1024 pixels: screens 1024 pixels wide or narrower get the tablet and mobile header.
To change it, open the Design tab of the header and set Screen size to switch to mobile header. The value is the narrowest screen, in pixels, that still gets the desktop header.
The mobile menu shows the menu assigned to the Mobile location. When that location is empty, it shows the Primary menu.
Off-canvas drawer
On tablets and phones, the Trigger element opens a slide-out drawer with the elements you place in the Off Canvas area. A new site has Mobile Navigation there.
Click the gear icon on the Off Canvas row to set up the drawer:
| Setting | Options |
|---|---|
| Layout | Side Panel (default) slides in from the side. Fullwidth covers the screen |
| Slide-Out Side | Left or Right (default) |
| Panel Width | Width of the side panel |
| Move Body with toggle? | Pushes the page aside while the side panel is open |
| Animation | Fade (default), Scale or Slice |
| Content Align, Content Vertical Align | Position of the drawer content |
The Design tab sets the Popup Background, the close icon and its colors.
Click the gear icon on Trigger to change the button itself: Menu Label adds text next to the icon, Trigger Icon picks the icon and Trigger Style switches between Default and Bordered.
Sticky header
A sticky header stays at the top of the screen while visitors scroll.
- Open Appearance → Customize → Header and click Sticky Header.
- Set Enable Sticky Header? to the part that should stick: Yes - Only Main Row, Yes - Top Row & Main Row, Yes - Whole Header, Yes - Only Top Row or Yes - Only Bottom Row. The default is No.
- Under Mobile Sticky, set Enable Sticky for Mobile? the same way for the tablet and mobile header.
More options appear once the header is sticky:
- Enable Reveal Sticky on Scroll up hides the header while visitors scroll down and shows it when they scroll up.
- Enable Main Row Shrinking makes the main row shorter once the page scrolls, down to Main Row Shrink Height.
- Different Logo for Stuck Header? swaps in another logo while the header is stuck.
The Design tab sets the colors, background, bottom border and shadow of the header while it is stuck.
Transparent header
A transparent header lies on top of the first section of the page, which works well above a full-width hero image.
- Open Appearance → Customize → Header and click Transparent Header.
- Turn on Enable Transparent Header?.
- Under Enable for:, choose Desktop, Mobile or both. Both are on by default.
- Choose where it does not apply. Disable Search and Archives? is on by default, so archives keep the normal header. Disable on Pages? and Disable on Posts? are off. With WooCommerce, Disable on Products? is on by default.
Turn on Different Logo for Transparent Header? to use a light logo on a dark hero. The Design tab sets the text, link and button colors for the transparent state.
To turn the transparent header on or off for one page, open the page in the block editor, open the Page Settings sidebar and set Transparent Header to Enable or Disable. Default follows the Customizer. The same sidebar has Disable Header and Disable Footer to hide them on that page.
Footer builder
- Go to Appearance → Customize → Footer.
- The footer builder opens below the preview with three rows: Top Row, Middle Row and Bottom Row.
- Drag elements from Available Items into the columns, or click the + in an empty column.
The footer has no separate mobile builder. Instead, each row's Layout can differ per device: switch the Customizer preview to tablet or mobile with the device icons at the bottom of the sidebar and set it there. By default the columns stack on phones.
A new site shows the copyright text in the bottom row and nothing else.
Footer elements
| Element | Notes |
|---|---|
| Copyright | Your copyright text. Edit it under Footer Copyright HTML |
| Footer Navigation | The menu assigned to the Footer location |
| Social | Icons that link to your social profiles |
| Widget 1 to Widget 6 | Show the widget areas Footer 1 to Footer 6 |
| Dark Mode Toggle | A light and dark switch. See Dark mode |
Footer widgets
Each widget element shows one widget area. Click the element's gear icon to open the widget area in the Customizer and add blocks, or edit Footer 1 to Footer 6 under Appearance → Widgets.
Footer row settings
Click the gear icon at the left end of a row:
| Setting | What it does |
|---|---|
| Container Width | Standard, Fullwidth or Contained, as for header rows |
| Columns | 1 to 5 columns. The top and middle rows start with 3, the bottom row with 1 |
| Layout | How the width is shared between the columns |
| Row Collapse | In the tablet and mobile preview: whether stacked columns run Left to Right or Right to Left |
| Column Direction | Whether elements inside a column sit in a Row or a Column |
| Column Spacing, Widget Spacing, Top Spacing, Bottom Spacing, Min Height | Spacing inside the row |
The Design tab of each row sets widget title and content fonts, link colors, the row background and borders.
On the Design tab of the footer itself, Footer Background sets the background behind all rows, and Keep footer on bottom of screen pushes the footer to the bottom of the window on pages with little content. It is on by default.