How to Create a Custom Header & Menu using Gutenberg FSE Block

Designing a custom header in WordPress doesn’t have to be complicated — especially if you’re using Gutenberg’s Full Site Editing (FSE) capabilities. In this tutorial (Day 4 of the Gutenberg Challenge Series), we’ll walk you through how to create a fully customized header with a menu, logo, and buttons – all using default Gutenberg blocks.

By the end of this guide, you’ll know how to structure your header, style it, and even add drop-down menus without relying on a page builder or third-party plugin.

What You’ll Learn

✅ How to create a header using Gutenberg FSE
✅ The difference between Group, Row, and Navigation blocks
✅ How to add custom menus, logos, and buttons
✅ How to style your header for a polished look
✅ How to create drop-down menus inside Gutenberg Navigation

Accessing the Site Editor

First, you need a block theme (like Twenty Twenty-Five) since classic themes won’t work with FSE.

1️⃣ In your WordPress Dashboard, go to Appearance → Editor (Site Editor).
2️⃣ Click on Edit Header.
3️⃣ Remove the default header elements if needed (clean slate!).

💡 Tip: Only block themes support Full Site Editing. If you’re unsure whether your theme supports FSE, check WordPress.org’s Block Theme Directory.

Creating a Navigation Menu

✅Add a Navigation Block.
✅Click the three-dot menu → Create new menu.
✅Add links for:
1️⃣Home
2️⃣About Us
3️⃣Services
3️⃣Blog

👉 You can add custom links or existing pages.

Adding Your Logo

✅ Add a Site Logo Block inside your header.
✅ Upload your PNG/SVG logo from the Media Library.
✅ Adjust the logo size (e.g., 140px) for the best fit.

Adding Buttons (Sign In & Sign Up)

✅ Add two Button Blocks:
1️⃣Sign In – Transparent background, black text.
2️⃣Sign Up – Solid blue background (#yourbrandblue), white text.

Styling Tips:

✅ Set padding: Top/Bottom: 10px | Left/Right: 15px
✅ Border Radius: 10px for smooth, rounded corners.

Aligning Your Header Layout

✅ Select the Menu, Logo, and Buttons.
✅ Wrap them inside a Row Block.
✅ Set alignment to Wide Width and justification to Space Between for perfect spacing.

✅ You now have a clean, professional header layout!

Adding a Drop-Down Menu

Gutenberg Navigation makes submenus simple:

1️⃣ Click on any menu item → Submenu.
2️⃣ Add your submenu items (e.g., “Team”, “Portfolio”, “Contact”).
3️⃣ Save and reload the site — you’ll see your dropdown live!