Header Block Examples


The Header Block is a powerful block for building and customizing your website header. It features multiple navigation menus and several options for changing the logo, colors, typography, spacing, and layout. Additionally, the header position may be changed to overlay on top of content ā€” such as the Cover or Hero Block. Also, the block features mobile navigation for smaller devices. STAX utilizes the Header Block for its logo and navigation menus, and it may be customized in the Full-Site Editor.

Multiple block variations are showcased below. Each variation may be copied to your clipboard, and pasted directly into your WordPress block editor. However, the Organic Blocks plugin is required.

Please Note: These are example style variations created to showcase the block flexibility. Any variation can be modified to your liking, and entirely new variations may be created using the block settings.

Variation 1

Copy this block variation using the button, and paste it into your WordPress block editor. The Organic Blocks plugin is required.

Copy Block
Copied block to clipboard!
Copy Pattern
Copied pattern to clipboard!

Variation 2

Copy this block variation using the button, and paste it into your WordPress block editor. The Organic Blocks plugin is required.

Copy Block
Copied block to clipboard!
Copy Pattern
Copied pattern to clipboard!

Variation 3

Copy this block variation using the button, and paste it into your WordPress block editor. The Organic Blocks plugin is required.

Copy Block
Copied block to clipboard!
Copy Pattern
Copied pattern to clipboard!

Variation 4

Copy this block variation using the button, and paste it into your WordPress block editor. The Organic Blocks plugin is required.

Copy Block
Copied block to clipboard!
Copy Pattern
Copied pattern to clipboard!

Variation 5

Copy this block variation using the button, and paste it into your WordPress block editor. The Organic Blocks plugin is required.

Copy Block
Copied block to clipboard!