Skip to main content

Header

Configure your site's global header.

Overview​

The header appears at the top of every page on your site. It typically contains:

  • Logo
  • Navigation menu
  • Search functionality
  • Call-to-action buttons
  • Social links

TheDock lets you design your header visually and apply it globally.

Header Basics​

What is the Header?​

The header is a module that's automatically inserted at the top of every template. Unlike regular sections, you don't need to add it to each template manually.

Accessing Header Settings​

  1. Click B. Layout in navigation
  2. Click Header in the sidebar

Assigning a Header Module​

Selecting Your Header​

  1. In the Header section, you'll see available header modules
  2. Click on a header to preview it
  3. Click Use as Header to apply globally

Pre-built Headers​

TheDock includes pre-designed headers. You can:

  • Use them as-is
  • Customize them
  • Create your own from scratch

Creating a Custom Header​

  1. Go to B. Layout > Modules
  2. Click New Module
  3. Build your header layout
  4. Return to Header and select your new module

Editing Your Header​

Opening the Header Editor​

  1. In B. Layout > Header
  2. Click Edit Header on the active header
  3. The module editor opens

Header Structure​

Typical header structure:

Header Module
└── Section
    └── Grid
        ├── Area: Logo
        │   └── Block: Image/Text
        ├── Area: Navigation
        │   └── Block: Menu
        └── Area: Actions
            └── Block: Button/Search

Common Header Elements​

SettingDescription
ImageUpload your logo file
SizeLogo dimensions
LinkUsually links to homepage
Alt TextAccessibility description
SettingDescription
Menu LocationWordPress menu to display
StyleHorizontal, vertical, dropdown
Mobile MenuHamburger icon for mobile
SettingDescription
IconSearch icon display
ExpandClick to expand search field
StyleInline or overlay

CTA Button​

SettingDescription
TextButton label
LinkDestination URL
StylePrimary, secondary, outline

Header Behavior​

Make your header stay visible while scrolling:

  1. Select the header section
  2. Enable Sticky in settings
  3. Configure:
    • Sticky offset (space from top)
    • Background change on scroll
    • Shrink animation

Transparent Header​

For headers overlaying hero images:

  1. Set header background to transparent
  2. Adjust text colors for visibility
  3. Consider scroll behavior (solid on scroll)

Mobile Header​

Headers automatically adapt for mobile:

  • Navigation collapses to hamburger menu
  • Logo may resize
  • Actions may be hidden or simplified

Responsive Design​

Desktop Header​

Full header with:

  • Complete navigation
  • All elements visible
  • Maximum logo size

Tablet Header​

May include:

  • Condensed navigation
  • Hamburger menu (optional)
  • Adjusted spacing

Mobile Header​

Typically features:

  • Hamburger menu icon
  • Simplified logo
  • Essential actions only

Preview Modes​

Use the device preview to test header on all sizes.

WordPress Menus​

TheDock uses WordPress menus for navigation:

  1. In WordPress admin, go to Appearance > Menus
  2. Create a menu with your pages
  3. In TheDock, assign the menu location
  4. The menu displays in your header

Configure in C. Build > Menu Locations:

  • Primary Menu
  • Secondary Menu
  • Mobile Menu

Best Practices​

1. Keep It Simple​

Include only essential elements. Don't overcrowd.

2. Prioritize Navigation​

Make it easy to find the menu. Users expect top-level navigation.

3. Responsive Testing​

Test on all device sizes. Mobile header is crucial.

4. Contrast​

Ensure logo and links are visible against background.

5. Fast Loading​

Optimize logo image size for quick loading.

6. Accessible​

  • Proper heading structure
  • Keyboard navigation
  • Clear focus states

Header Variations​

Per-Template Headers​

If certain pages need a different header:

  1. Don't use global header for that template
  2. Add a header module section manually
  3. Choose an alternative header module

Logged-In vs Logged-Out​

For member sites:

  • Show login/register for guests
  • Show account/logout for members
  • Configure via WordPress menu conditions

Troubleshooting​

Header not showing​

  • Verify header module is assigned
  • Check template structure
  • Export theme to see changes
  • Confirm WordPress menu exists
  • Check menu location assignment
  • Verify menu has items

Logo too big/small​

  • Adjust logo block size settings
  • Check image dimensions
  • Use appropriately sized source image

Sticky header overlaps content​

  • Add padding to first content section
  • Check sticky offset settings

Mobile menu not working​

  • Ensure JavaScript is loaded
  • Check for console errors
  • Verify menu structure

← Back to Documentation