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

SettingOptionsRecommendedDisplay ModeLogo only, Title only, BothLogo only for headersLogo SourceSite logo or customSite logo (set in Customizer)Title TagH1-H6H1 for main brandingLink ToHome, Custom URL, NoneHome

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

SettingOptionsRecommendedWidthAny pixel value150-200px for headersHeightAuto or customAuto (keeps proportions)Link to HomeYes/NoYesAlignmentLeft, Center, RightLeft 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

SettingOptionsRequiresShow SearchYes/No-Show NotificationsYes/NoBuddyPressShow MessagesYes/NoBuddyPressShow CartYes/NoWooCommerceShow Dark ModeYes/No-User Menu ItemsCustomizable-

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

SettingOptionsRecommendedMenuSelect from your menusPrimary MenuLayoutHorizontal, VerticalHorizontal for headersDropdown AnimationFade, Slide, NoneFadeMobile BreakpointPixel value768pxHamburger StyleLines, Dots, ArrowLines

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)

Back to All Blocks | Next: Design Blocks