FSE Series 6: Customizing Navigation Menus in FSE: From Dropdowns to Mobile Responsiveness

Target Audience: Users ready to design user-friendly menus that adapt to all devices.

Introduction

In Post 3, you learned to customize headers and footers. Now, let’s focus on navigation menus—the roadmap guiding visitors through your site. With FSE’s block-based approach, menus are no longer confined to rigid layouts or clunky plugins.

By the end of this guide, you’ll:

1. Create multi-level dropdown menus using the Navigation block.
2. Style menus to match your brand (colors, fonts, hover effects).
3. Ensure menus look flawless on mobile devices.

Let’s build menus that are as functional as they are beautiful!

Part 1: Creating Your First Menu with the Navigation Block

The Navigation block replaces classic WordPress menus. Here’s how to use it:

1. Add the Navigation Block:
   • In the Site Editor, open a Header template part (or create a new page).
   • Click + > Navigation block.
2. Select or Create a Menu:
   • Choose an existing menu (created via Appearance > Menus) or click + Create Menu.
   • Add items like Home, About, Blog, and Contact.
3. Organize Dropdowns:
   • Drag a menu item below and slightly to the right of a parent item to create a dropdown.
   • Example: Drag Services under About to make About > Services.
4. Adjust Settings:
   • Display Style: Horizontal (default) or vertical (sidebar).
   • Overflow Menu: Show a “More” link if items exceed space (great for long menus).

Part 2: Styling Menus to Match Your Brand

Customize your menu’s appearance using Global Styles and block settings:

1. Colors & Typography:
   • Open the Styles panel (half-circle icon).
   • Navigate to Blocks > Navigation to set:
     • Text/background colors.
     • Font size, weight, and spacing.
2. Hover & Active States:
   • Under Blocks > Navigation > Hover/Active, define hover colors or underline effects.
3. Dropdown Styling:
   • Select the parent menu item.
   • Use the Block Settings sidebar to style dropdown backgrounds, borders, and spacing.

Pro Tip: Use subtle animations (e.g., fade-in dropdowns) via Custom CSS (covered later).

Part 3: Mobile-Responsive Menus

Over 50% of web traffic is mobile. Ensure your menu adapts flawlessly:

1. Mobile Breakpoints:
   • Use the Device Preview (top toolbar) to test mobile views.
2. Hamburger Menu Setup:
   • Select the Navigation block.
   • Enable Responsive Settings > Mobile in the block sidebar.
   • Choose a Hamburger icon style and position (left/right).
3. Off-Canvas Menus (Advanced):
   • Install a plugin like Stackable for slide-out mobile menus.

Part 4: Advanced Techniques with CSS

For granular control, add custom CSS:

Add Custom CSS:

• Go to Global Styles > CSS in the Site Editor.

Example 1: Smooth dropdown transition

.wp-block-navigation__submenu-container {  
  transition: opacity 0.3s ease;  
}  

Example 2: Mega Menu Grid

.mega-menu .wp-block-navigation__submenu-container {  
  display: grid !important;  
  grid-template-columns: repeat(3, 1fr);  
}  

1. Target Specific Menus:
   • Use unique CSS classes assigned in the Navigation block’s Advanced settings.

Note: Always test CSS changes across devices!

FAQs

Q: How do I link to external sites in the Navigation block?
A: Add a Custom Link item in the menu and enter the full URL (e.g., https://example.com).

Q: Why isn’t my dropdown menu appearing?
A: Ensure parent items have sub-items assigned. Also, check for conflicting CSS or plugins.

Q: Can I use mega menus in FSE?
A: Yes! Use Columns blocks inside dropdowns or custom CSS grids (as shown above).

Q: How do I reset menu styles?
A: In Global Styles > Blocks > Navigation, click Reset to defaults.

What’s Next?

You’ve just mastered one of the most critical parts of user experience—navigation! In Post 7, we’ll unravel the Template Hierarchy, explaining how FSE replaces PHP templates and how to customize layouts for archives, single posts, and more.

For now, experiment with:

• Creating a sticky header that stays fixed while scrolling.
• Adding icons to menu items using the Icon block (via plugins like Kadence).

Conclusion

Gone are the days of wrestling with clunky menu plugins or rigid theme settings. With FSE’s Navigation block, you’re in full control—crafting menus that dazzle on desktop, adapt on mobile, and align perfectly with your brand.

Ready to dig deeper into WordPress’s structural magic? Let’s decode the Template Hierarchy in the next post!

Love what you see? Explore our packages and pricing – let’s bring your vision to life!