Header Setup

The header is the first thing visitors see. Your links come from a WordPress menu; the theme Customizer controls the layout, logos, colors, and mobile menu.

Overview: Flexible Headers and Mobile Menus.

Create and assign menus

1. Go to Appearance → Menus.
2. Create a menu or edit an existing one.
3. Add pages, custom links, and categories.
4. Assign the menu to the Main Menu location.
5. Click Save Menu.

To show a different menu on phones, assign one to Mobile Menu. Otherwise the mobile menu uses your main menu. The footer menu is assigned the same way; see Footer and Contact.

Mega menus: With Dirigible Mega Menu active, you can link a menu item to a Mega Menu post to show a dropdown panel built with blocks.

Upload logos

1. Open Appearance → Customize → Header & Menus → Logo.
2. Upload your Logo for the standard header.
3. Add a Reverse Logo (usually all white) for headers that sit over dark photos or use reverse colors.
4. Turn on Change Logo on Scroll and upload a Scroll Logo if the header should switch to a different mark after visitors scroll.
5. Use Change Size on Mobile or Change Size on Scroll to shrink the logo on phones or after scrolling.

Control reference: Logo.

SVG logos stay sharp at every size. PNG works when you don't have an SVG.

Set up the desktop header

Open Desktop:

1. Set Transparent Masthead to Enabled for a transparent header over a hero or full-width image at the top of the page.
2. Leave Sticky Menu on to keep the header visible while visitors scroll. Turn on Show on Scroll Up if the header should step aside while visitors scroll down and return when they scroll up.
3. Try Floating Masthead for a rounded bar that floats over the page, with its own opacity and blur settings.
4. Set Link Color and Link Hover Color so links read clearly on your header background.

Preview both the home page and an interior page. A transparent header looks different when a page doesn't start with a hero.

Set up the mobile menu

Open Mobile:

1. Set the Breakpoint where the menu button replaces the desktop links.
2. Choose the Drawer Width and Background (Drawer Menu).
3. Set Link Color for the drawer, and pick a Menu Icon and Close Icon with their sizes.
4. Use the Customizer's mobile preview to check that links are easy to tap.

Menu items with a submenu: in the drawer, the item's name links to its page and the arrow beside it opens the submenu. If the parent shouldn't be a page of its own, make it a Custom Link with # as the URL; then tapping its name opens the submenu too.

Add a utility bar and a header button

Utility Nav is a slim bar above the main header for announcements, social icons, cart, and login links:

• Utility Nav: turn it on, add banner text, and set colors. Links come from the Utility Menu location under Appearance → Menus.
• Styles → Utility Nav: text size for the bar.

Header button is a single call to action, such as Donate, Book Now, or Contact:

• Button: turn it on, then set the text, link, and button style.

Accent border

Accent Border adds a thin colored stripe above the header. Pick a palette color such as Primary or Accent.

Quick checklist

Click Publish in the Customizer when you're done.

Related guides

• Palette and Typography: site colors and fonts
• Widths and Layout
• Footer and Contact
• Getting Started