Header Blocks
Build professional site headers with these 4 blocks. Perfect for navigation, branding, and user account areas.
Branding
Display your site logo with optional title and tagline.
What You Can Do
- Show your logo, site title, or both together
- Choose heading level (H1-H6) for SEO
- Link to homepage or any custom URL
- Adjust logo size and alignment
Settings
| Setting | Options | Recommended |
|---|---|---|
| Display Mode | Logo only, Title only, Both | Logo only for headers |
| Logo Source | Site logo or custom | Site logo (set in Customizer) |
| Title Tag | H1-H6 | H1 for main branding |
| Link To | Home, Custom URL, None | Home |
Best For
- Main site header
- Footer branding
- Email-style letterhead sections
Site Logo
Simple logo display with size controls.
What You Can Do
- Display your site logo at any size
- Control width and height independently
- Link to homepage automatically
- Align left, center, or right
Settings
| Setting | Options | Recommended |
|---|---|---|
| Width | Any pixel value | 150-200px for headers |
| Height | Auto or custom | Auto (keeps proportions) |
| Link to Home | Yes/No | Yes |
| Alignment | Left, Center, Right | Left for headers |
Best For
- Header logo
- Partner/sponsor logo sections
- Footer branding
Header Bar
Complete navigation bar with user account features.
What You Can Do
- Add search, notifications, messages, and cart icons
- Show user avatar with dropdown menu
- Support dark mode toggle
- Display friend requests (with BuddyPress)
Settings
| Setting | Options | Requires |
|---|---|---|
| Show Search | Yes/No | – |
| Show Notifications | Yes/No | BuddyPress |
| Show Messages | Yes/No | BuddyPress |
| Show Cart | Yes/No | WooCommerce |
| Show Dark Mode | Yes/No | – |
| User Menu Items | Customizable | – |
Best For
- Main site header
- Member area navigation
- Community site headers
Pro Tips
- Combine with Smart Menu for complete navigation
- Enable dark mode for better user experience
- Notifications show unread count automatically
Smart Menu
Advanced navigation with mega menu support.
What You Can Do
- Display any WordPress menu
- Create horizontal or vertical layouts
- Add mega menu dropdowns
- Automatic mobile hamburger menu
Settings
| Setting | Options | Recommended |
|---|---|---|
| Menu | Select from your menus | Primary Menu |
| Layout | Horizontal, Vertical | Horizontal for headers |
| Dropdown Animation | Fade, Slide, None | Fade |
| Mobile Breakpoint | Pixel value | 768px |
| Hamburger Style | Lines, Dots, Arrow | Lines |
Best For
- Main navigation
- Footer navigation
- Sidebar navigation
Pro Tips
- Create your menu in Appearance > Menus first
- Use submenus for dropdown items
- Test on mobile – hamburger appears automatically
Building a Complete Header
Combine these blocks for a professional header:
[Branding] + [Smart Menu] + [Header Bar]Recommended Layout
- Row 1: Branding (left) + Header Bar (right)
- Row 2: Smart Menu (full width)
Or use a single row:
- Branding (left) + Smart Menu (center) + Header Bar (right)