Full Site Editing in WordPress is full of potential but hasn’t fully matured. One big challenge is how to handle navigation for both desktop and mobile visitors. There are several common scenarios where the Navigation Block provided by WordPress doesn’t work well.

Lots of items in the desktop navigation

Plative’s header seems pretty straightforward but visitors on tablets can’t fit the logo, the menu items, the CTA and the search button in one row. The easy fix is just to switch to the mobile design at the appropriate width. Too bad WP doesn’t provide a way to set that.

Different Styles for Desktop and Mobile

It’s not uncommon to reduce font size or spacing to allow the desktop navigation layout to work on narrower screens. On mobile, you might want to increase font size and spacing so it’s easier to read and touch. Again, the default WP navigation block doesn’t support this.

Different layout for Mobile

Or consider a desktop header with two navigation menus:

What you really need is a single hamburger toggle and a way to put all your items on that modal. Maybe you want the logo up there. Maybe you want to use color, font size, icons or other design elements to help organize the layout. Again, that’s not possible in the default navigation block.

The fix

WP Core contributor Dave Smith has a super elegant and efficient plugin, Responsive Navigation Block. It solves the first two issues beautifully. It creates two variations of the navigation block: Desktop Navigation and Mobile Navigation.

And along with it a menu page where you can set the width where the mobile variation should be shown vs. the desktop. Since they’re separate blocks, you can set styles on the Desktop Navigation such as font size and spacing and set different styles on the other block.

Adding template support

For complete control what we really need is a Template Part. I’ve tacked this on to Dave’s work. And although it kind of spoils the elegance of his code, it gives you a straightforward way to lay out just about anything in your mobile navigation’s modal.

Then arrange blocks to suite your needs. You can place any block here including headings and groups. You can use any of the style controls.

One gotcha to be aware of is when you place a navigation block in this template part, be sure to set it’s Overlay Menu setting to “Off.” This is an overlay and you don’t need a second one.

The last step is to edit your Mobile Navigation block to display your template rather than merely the navigation menu. Just turn on the toggle and choose your menu template part.

Unfortunately, it’s not possible to show the template in this editor view at the moment. You’ll still see the navigation menu if you click the hamburger.

But the front end displays your template part exactly how you intended.

Looking ahead

Having to solve this common need with a plugin isn’t ideal. There’s work underway to add this functionality to the core navigation block. Follow it here. There’s no timeline for when this will land so I’ll keep using my alternative until that time comes.