Welcome to another InMotion Hosting video tutorial! My name is Arnel Custodio and we will be discussing menus in the new WordPress full site editor.
We will discuss how menus are now considered navigation blocks. Then we will walk through creating a menu.
We will also go through the different options to customize and manage menus in the full site editor.
This tutorial uses WordPress version 5.9.1 and the default Twenty Twenty-two theme.
As the transition to the use of the Full Site Editor is in progress, you should note that not all themes will have the same block or editing options for menus.
To start, log in to your WordPress site. We will first look at the Administrator Dashboard.
You can see that the menu option is gone from the Appearance section.
In order to see how you can add a menu, you will need to go to the Full Site editor.
You can navigate to the full site editor by clicking on Appearance in the main menu and selecting Editor.
You can also go to Themes, select the theme, and click on Customize.
Or, you can click on visit Site, in the top left-hand corner, then select Edit site in the menu at the top of the screen.
In the full site editor, we’re going to look at the default example site that loads up with the Twenty Twenty-two theme.
The menu they provide is located in the header. To see how it is identified as a block, go to List view, and then look for Header.
If you hover over Navigation, you will see the menu highlighted by a blue rectangle in the editor.
Under the Navigation block, are the items that consist of the menu.
In this case, it is a Page list. The Page list is automatically populated with published pages.
If you click on the EDIT option you will see a notification explaining that making changes in this way
will require that the page list be changed to single page links.
This allows you to add, re-order, remove items or edit their labels.
Click on Convert and then look at the list view once more. You will see that the block labeled Page List has been replaced by the individual page links
This is probably the most confusing part of the menu change in the full site editor.
The Navigation block allows you to create MULTIPLE menus and assign them to the navigation block.
However, you will not be able to change the items that make up the menu unless you’re using individual links.
If you do not convert the Page List to individual links, then you will not be able to customize those menus.
The Navigation block menu also has an option for Manage Menus and Create New Menu.
At this time, when you click on Manage Menus it appears to be incomplete, and clicking on this option will only allow you to add menu titles.
You won’t be able to manage what’s in the menus.
When you select the different menus, they will only differ if they have been changed to single page links.
Menus that consist of a Page list will always have the same page list as what’s in your site.
Let’s create a new menu. Make sure you have selected the navigation block first. You can then click on Select Menu and then you will see the option to Create New Menu.
When you create a new menu, it will automatically name it Header Navigation 4. You can rename it in the Manage menus section.
Click on Start Empty. Next click on the + sign to add a new link. You will see a list, or you can manually type in each link.
You can also create submenus by clicking on a menu item (in a single link list)
and then selecting the submenu item in the menu bar.
At this time, you can only manage the content of the menus in the Full Site Editor.
Next, let’s look at the Block properties for the Navigation block.
If you click on the navigation block in the list view, then you can see the block properties in the column at right.
Starting with the Layout, you can change the justification of each menu item, and its orientation (horizontal or vertical).
You can also enable or disable the option to wrap your menu to multiple lines.
Next is the Display section. Here you can enable the Overlay Menu option.
The overlay menu option collapses the navigation options in a menu icon that will appear on “top” of the website
You can turn it off, set it to Mobile, or Always.
If you click on Always, you’ll see the “hamburger” menu option.
This is the 3 line icon representing the menu when you view the site on smaller screens.
If you have submenus created, then you can set the options for how they appear
Then you can also set the COLOR for Text, Background, Submenu & overlay text, and submenu and overlay background
The Advanced section lets you change the menu name, delete the menu and add an HTML anchor.
This is also the section where you can add Additional CSS classes.
Thanks again for watching our tutorial on working with Menus in the WordPress Full Site Editor.
If you liked this video, please make sure and give us a thumbs up below.
And also please subscribe to our channel and leave a comment. Thanks again for watching and have a great day!