 All right, good day, everyone. As I said, the topic for today is using the navigation block. And to start with the definition, the navigation block is used to display a menu of links to help visitors navigate around your site. And of course, the navigation block is usually added to a header template part or a footer template part. So let's just have a look at the objectives of today's online workshop. Number one, creating and managing menus. We're going to look at adding a submenu, customizing your menu, adding blocks to your menu, rearranging or removing menu items, and of course, also picking at header or footer patterns. Because, yeah, we add the navigation block to those patterns. All right, so let's go and explore the navigation block. And the first place I'm going to start is, of course, one of my test websites. So let's make our way there. And you will notice if we go to Appearance and Themes, I have installed and activated the 2023 block theme. And of course, today I'll also be focusing on using a block theme, because with the block theme, you have the power in your hands to create and manage your navigation menus in the Site Editor. So let's make our way to Editor. And this will, of course, take us into our Site Editor. Now, where will we be adding our header and footer template pots? We usually add them to our template, right? We add content to our pages and posts, but we use templates to create the structure or design for a page or a post. So we add our header template pots and our footer template pots to templates. So there's, of course, two ways to add your navigation block to a header or a footer template pot. The first place is when you go to templates and you open up, let's say, for example, the page template. And then if we open up the template, we can start modifying the header or the footer. And something else I wanted to point out as well is if I go to pages, let's just go to pages. And let's say we are on our About page, we will notice that we add content to the post content block in a page. We can't customize our header and footer in a page. So let's see what happens if I click on my header. You will notice it says there, edit your template to edit this block. So if you then go to edit template at the bottom right here, it will take us to the page template, in this case. And here, you can, of course, customize your header or your footer. Another place where you can customize your header and your footer is if you make your way to patterns and right at the bottom, you will see template parts. And here, you will see header template parts, footer template parts, and general template parts. But of course, you can also then select a header template part here, open it up, and make changes here. Now for today's example, I have created a custom template to work in. So I'm just going to make my way to templates. I just clicked on the plus icon, and I created a custom template. And I've called it navigation block. So let's open up the navigation block template. And now, of course, I can go ahead and start building my header and my footer. So if I open up my list view, you will notice that my header here already has a row block. And then within the row block, we have another row block. And within that row block, I've got my site logo block. And then I stacked my site title and my site tagline block. So to add my navigation block, I'm going to select the parent row block. And then I am going to click on Add block. And in this case, we want to add the navigation block. Now you will see we actually have two list views. So you will notice I have selected the entire navigation block, the parent block. So you can see that here in this list view. And then, of course, on this side, you've got the navigation list view. Now one of the first things I wanted to highlight is that there is a parent-child relationship between the navigation blocks and the blocks within the navigation block. So of course, if I click on the home navigation item, for example, you will notice that the sidebar settings change. And in this list view, you will see, all right, here's my navigation block. And here are my individual page links that I've added. So this is the parent block. And these are the children that I've added to the navigation block. So let's say, for example, we have selected the home navigation menu, and now we want to select the parent block again. Now there's two ways to do that. You can click on Select navigation in your block toolbar. Or, of course, you could have done that in your list view. So it's always good to have your list view open because it does help you to always see where you are, what you're editing, et cetera. All right. So if you want to see other menus that you have already created, you need to go to the sidebar on the right. And then next to menu, you can click on the three vertical dots. And there you will see other navigation menus that you have already created. And of course, you can create a new menu from here. So let's go ahead and do that just for, for example, so I'm going to click on the three vertical dots, and I'm going to say Create menu. And now I want to start from scratch, building a new navigation menu. So I will click on Add block. And now it's important to remember that there's different things that you can add to your navigation menu. You can add pages. You can add post categories. You can actually add links to other websites. And you can add blocks, but we'll see that now. So for this example, or before we do that, let's say, yeah, for this example, let's just start building our basic navigation menu. And then we can talk about the other things as we go along. So the first thing I want to add is my home page, or my home page link. Now, of course, I've already created this page. Maybe I should jump this side. Just go back to my dashboard, and I go to Pages. So you will notice I have already added these pages. So these links are already created. And if I go to Posts, you will notice I've already created three posts as well. All right, so back here, I've typed in home. And now you will notice on the right, it is a page link. So then I can click on Home. And then I'll click on the Insert again. And this time I want to add, it's a sushi restaurant. So I created a menu page. So another page link, my About page, another page link, and a Contact page. And that's also a page link. And now I would like to add some social icons as well. You'll notice at the bottom, it says Transform. And there's actually three different blocks, or four different blocks that you can add here. But we're after the Social Icons block. So we can add the Social Icons block. And then I'm just going to open up my list view. Make sure you select the parent block. And now I'm going to say I want this to be an Instagram. Select the parent block again, Facebook, parent block again. And let's say WordPress for now. And of course, they are gray at the moment. So let's just add a fake URL. And of course, when you do that, the correct color will appear. So let's just add a XC for now. But now the interesting thing that you can take note of is if you select the navigation block and click on the Insert to Now, it looks a bit different because you've added a different block. Now you can add one of these blocks. But if you click on Browse All, you will see all the different blocks that you are able to add to your navigation block. And unfortunately, it is limited to these only. I know some folks sometimes ask, can you add a buttons block to a navigation menu? And unfortunately, you can't do that yet without code. You can't do it with core WordPress as yet. All right, so let's go ahead and add one more navigation item. So let's say I want to add another page. So then I will select Page Link. But now I haven't created a page that I want to add. So let's see, I want to add a blog page. Let's type in blog. Now as you will notice, there's no blog page yet. So if you go here and if I go to pages, you will see there's no blog page. Now of course you could have done it in the dashboard, but or in the site editor even. But now you also have an option to create a draft page. So let's create this draft page and then press Save. And now we can go to our dashboard. Let's refresh this. There's our blog page now. It's Edit. We can add some content. We are going to Publish. And now we can go back and we can refresh because we've published it now. And now you will notice there's our blog page. Now when you select an individual block within your navigation block, you are able to move in. So there's actually two ways to do it. You can use the mover. So let's for example select the blog page and we can use the little arrows or movers and we can say, oh, we actually wanted to be here. Another option of course is it's a, you use your list view and you can drag it up and say you want it there. It's the longer line. If it's a shorter line, just want to show you. If it's a shorter blue line, sometimes it's a bit clunky. If it's a shorter blue line, it's going to be added as a sub menu. You don't want that yet. So you want it to be a longer blue line. And then of course you can rearrange blocks using the list view as well. And you can even use this list view. So you can even drag and drop it that way as well. Or of course, whoops, wrong arrow. Or you can of course say, I want to use the little arrows or the movers. Right, now the next thing that I wanted to do is I want to add a sub menu. So what you do is you select the relevant navigation item and then in the block toolbar, you will see an option that says add sub menu, this little icon. So I'm going to select add sub menu. I'm going to say add link. Now this time I actually don't want to add a page link. I want to add links to three of my blog posts. So we can do that. So I'm going to type in sushi because you have to type in the name. You can't just merely type in, let's see what happens if you type in post. If you type in post, it says create a draft page. So we can't do that, but I know the name is sushi in my title of my post. And now you will see it says post there. So these are the posts that I've created. And now I can say, okay, the first one I'm going to add is sushi etiquette. I'm going to press enter, type in sushi again. Making sushi, enter again. And the last one is the sushi ship. Now you can even go further and build out your sub menu even more. So if I select this navigation item, I can click on sub menu. And of course you can just keep going and keep extending your menu items or your sub menu items. All right, but I don't want to do that. So I'm going to say undo and there we go. We've got our sub menus below blog. All right, now let's talk about customizing our navigation block a bit. Okay, so if you select your parent block, of course, you will notice there's a settings tab and a styles tab. So if I go to settings, you will notice below display, you can decide if you want the hamburger menu, if you want the hamburger menu to display on mobile or not. So at the moment I've selected mobile. So that means that the hamburger menu will come up on a smaller device. You can even select always, then it will always be a hamburger menu. Even on a desktop, but let's select mobile for now. If you click on the hamburger, there's two different icon options. So there's one with three lines. So we can even select that one. And let's talk about sub menus as well. Here below settings, you will see there's a sub menu option at the moment when I hover over blog, my sub menu appears. But if I select open on click, we will see that if I hover over my navigation item, it does not appear, I have to click. And if I click, then opens up. So I also wanted to mention, if I'm here and my list views open, the way to go back to our parent block is selecting the select navigation icon. So let's say select navigation that will ensure that I select my parent block and I can go back to settings and say, okay, no, I actually wanted to open up when I hover. So let's put the open on click off and show arrow. And then it will open up when you hover. Then next to settings, you've got styles. And now, for example, you can change the text color, the background color, even the sub menu text color and the background color of your sub menu. So let's do a bit of, let's make some changes and let's see this in action. So if we go to topography and let's say I want to change the appearance, it's like appearance. And then let's say we want this to be light. We can also change the size. So let's say we want this to be medium. Can even make a large, but let's go for medium. And the other thing that I wanted to do is I wanted to change the color of the text of my sub menu. So let's do that. So if I go to sub menu and overlay text, let's select that. And I'm going to add a custom color, the same red as you will see in my site logo. So here you can customize if you click here on the top, you can add a hex code. So you can add or you can use the slider here, but I've got a color already and I know the hex code. So it's EB1D27. And now you will notice that if you hover over the blog page, your sub menu has got a different color. So there are many options to customize your navigation menu. All right, so I'm gonna click save for now. And let's turn our attention to our footer then. As you will notice, I've already started building my footer, but I have not added page links to my footer. So let's open our list view and let's see our footer. We've got a roadblock as well. We've stacked the site title, the address and priority part by WordPress. And then on that side, we've stacked a paragraph and on this side, we've stacked our social links. So we're gonna select this paragraph pages and we're gonna click on the three vertical dots and say add after, great. And now we are going to say, we want to add our navigation block. Okay, so we've added our navigation block, but that's not the one we want. So we can easily change that. Of course, you go to the three vertical dots and we can now select the footer navigation, the one that we've already created or you can of course create a custom footer. So let's select footer navigation. That's the one I have already created. But now of course these items are displaying horizontally. I want them to display vertically and that's also an easy fix. And we've selected the parent block. If we go to settings, you will notice next to justification is an option orientation. And at the moment it is horizontal and we can say we want it to be vertical. And now we have some quick links to our pages in our footer. And of course we can add our new blog page if we wanted to, et cetera. I wanted to show you an example of a university website, Georgia State University. And in this example you will notice this type of header. And of course this is achievable. This is actually something easy to build by just adding this is one, two, three, four, five, six different navigation menus or navigation blocks that they've added. Now of course we changed this so we can go ahead and customize, we can customize this as well now if we want to. All right, so that is the first example, the first two examples I wanted to show you. I'm gonna jump over to my other test website. And now I'm actually going to use a pattern to show you how that works as well, a header pattern. So of course I have installed the 2023 block theme again. We're gonna make our way to the editor. And this time we are going to customize one of our proper templates. Our page template. So I'm going to select templates and I'm going to select the page template. And then I'm going to open it up. And now of course we can start modifying our header and our footer in our template. Now you will see there's already a list of all the pages on my site. Now the reason I wanted to show you this as well is because I have not created any, I've not created any navigation menu yet. So when you start a new website and you will see this actually happening, you'll see a page list. So let's just open up my list view and let's open up and select the navigation block. Now at the moment you will see if I even open this up, you will see it's a page list. So at the moment I can't manipulate any of the individual blocks within the parent block because they are all part of a page list. So we can't do anything about it yet. I can't, you'll see the movers are grayed out. So what do we do? Well, of course you can just select edit. Yet the bottom on the right in the sidebar it says edit this menu. This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking edit below. All right, so let's say edit and there we go. Now we can actually start saying, okay, we wanna move these around. Okay, we're gonna look at that in just one sec. For now I'm going to select the header though and say, okay, I don't want this header. I want a different pattern. And of course in WordPress they provide you with different types of patterns. You can of course get access to different types of patterns but when you select your header you can look at some header patterns that come with your theme or some of the core WordPress patterns. So I'm selecting my header. Then I'm going to select the three vertical dots and say replace header. And now you will see I have some patterns to choose from. So all the hard workers have already been done for me. And these are of course core patterns that's part of WordPress. So I'm going to select this one. Full width header with Euro image. So let's select that. Great. Now the next thing that I wanted to do is I want, I'm just selecting this header. I want to focus on this header without any distractions. So I'm going to modify this header in focus mode. So if you select your header and you click on edit you will go into focus mode or template editing mode. And now I can edit this header without any distractions. I won't have to edit it right within my template. We could have stayed in the template and we could have edited there but now you can do it without any things that or anything that might distract you. Okay, so let's select our navigation block and say, all right, it was a page list. I have changed it so that I can edit it. So now I don't want some of these pages. Some of these pages were just added because they were part of my website. So I can select test two, we want to delete that. So I'll select the block, click on the three vertical dots say delete and the sample page select three vertical dots, delete. And now I'm actually going to quickly make some updates to my header to show you what is achievable and when using a pattern. So I've already added a site logo or logo to my media library and I've already added a euro image to my media library. So I'm going to click on the site logo block and I'll select this image that I'm going to use for my site logo and I'm going to select the euro image or the cover block say replace, open media library select. And now the next thing I want to do is at the moment my site title says support. I'm going to say this is Penguin Palace. It's my site's name or my company's name or non-profit's name and there you go. I've created this header using a pattern in a few minutes. So, yes, patterns are, are wonderful ways to build headers and footers. All right, so I am going to click save and I'll show you another example. You can, for example, go to... So this is when I worked in a template and I decided I'm going to actually focus on this template part in focus mode. But if I go to template parts now and I click on header, you will notice my header is available here now. And of course, if I click on it from here, I can edit it. All right, so if I select footer, for example, here in below patterns, I can click on the plus icon and say create template part and say I want to create a footer template part and let's say we call it test footer and create. And now you can start creating it from scratch, but let's use a pattern. Now, I'm not going to use one of the patterns that come with my theme or core WordPress. I'm actually going to go to the Patterns Directory. So if you make your way to the WordPress.org site and you hover over download and extend, you make your way to patterns and you can click here on footers and here are some footers that come with core WordPress. You will notice they all say WordPress.org or you can click on curated and select community and I will see patterns that's been added to the Pattern Directory from community members. And if you like a pattern, you can say, okay, let's copy this pattern, let's make our way back. Now you can just paste. So I'm going to say command V and now we can just paste this pattern. And now we can of course edit the pattern and modify the pattern according to our needs, but I wanted to show you where to add your navigation block, of course. So if I select this block, you will notice this is just a placeholder, right? The pattern doesn't have any page links. This is just a placeholder to show you, oh, we can add our navigation block here. So I'm going to delete this, click on the three vertical dots and say delete that, click on the three vertical dots and say add after and now we can type in navigation and let's open styles and say we want the text to be white. And then of course we need to go to settings and say we want this to be vertical. And there we go. And now of course you can modify it so that it all looks the same. So yeah, I just wanted to show you those two examples where you can use patterns to your advantage. The next example that I wanted to show you was a website I created using a cover block and adding a row block and adding a navigation block to my cover block. So I created this website, a photography website and you will notice I've added my navigation menu here and I've added a sub menu, the one where you actually have to click on first. So let's click on galleries and let's select one of the galleries, action sports and you will see a different header. And yeah, so I wanted to show you how you can quickly create this type of header using a cover block and of course your site logo block and your navigation block and a row block and a spacer block. Okay, I'm just gonna quickly show you how you can do this. So let's make our way to appearance, click on editor, let's go to patterns, let's go to headers. Now of course here you will see the ones that I've created but we're gonna say we wanna create a new header template part. So create template part. We wanna create a header template part. Let's say, let's call this navigation block example and say create. Okay, now we can quickly build this from scratch. So first up, I'm gonna add a cover block and I'm gonna select the image that I wanted. So this image and I'm gonna change the opacity. Moment is a docker opacity. Let's just make this a bit lighter. We can change that now if we wanted to. Okay, let's make this a bit larger. All right, so now we're gonna add a row block and on the left, we are gonna add our site logo. All right, let's make that a bit larger. Make sure you select your row block again and on the right of that, we wanna add our navigation block. Now that's not the navigation block I wanted right. So I'm gonna click on the three vertical dots and say, oh, I want that one, navigation. There we go. Okay, select the row block. Let's press enter and now add a spacer block because we wanna push that up. So we can enlarge this spacer block. There we go. Okay, so now let's select our row block, almost there. Let's make this wide width. But now you'll notice that my, let's just enlarge this slightly as well. Now you will notice that my navigation block is right next to my site logo. Now the way to fix that is to select your row block, open up settings and below justification, there's an option called space between items. And when you select space between items, it's gonna make some space between the logo and the navigation menu. Great. And now we can even add some padding. Let's add some padding around there. Let's select our navigation, whoops, undo. Select our navigation block and say, okay, we want to change the font family. So let's typography, appearance, sorry. And let's also say we want this to be light or even extra light. And let's make that medium or large. Or you can click on set custom size and say, okay, no, let's make this 1.6 or 1.5. Let's enlarge that a bit. And there you go. Let's say we can even say, let's say that's full width. That might look a bit better. So we've made the row block full width. So there I've created a new header using a cover block. If you open your list view, using a cover block, a row block, and then within your row block, I have my site logo, my navigation block and a space of block. So something else that I wanted to point out to you, this is a new feature that landed with 6.3. So I'm going to just make my way to this test website again and let's make our way to the site view sidebar. So when you open your site editor, you will notice you've got access to navigation, styles, pages, templates, patterns. Now we haven't spoken about this part of the puzzle, but you can make simple edits to your navigation block or to your navigation menu from here as well. You won't be able to style it, et cetera, but you will be able to make some simple edits as mentioned. So let's see how that works. If I select navigation here, you will notice I've got four of my navigation menus here. So let's select the first one, hit a navigation. Now here you will be able to, of course, rearrange items. You can delete menu items here. And if you click on the three vertical dots next to the name of the navigation, you'll be able to rename or duplicate or delete this navigation menu. So of course, if you click on the three vertical dots and say rename, I can let's say, I want this to be called main menu. And now I can save. And now, of course, it will be saved as main menu. You can also click on edit here and it will take you into focus mode and you can make some simple edits here, but please note you can't style it here. If you open your list view, you will see that the navigation blocks is actually locked here. So you will see you don't have your settings or your styling options here. It is only for simple edits. To, of course, style your navigation menu, you have to go to template parts or to a template and do it right from within there. All right, so again, if I wanted to now style something, I've got to go, let's go to our example template. It was the navigation block template, open the template and I can style my navigation menu from here with settings and styles. All right, so those are the main examples that I wanted to show to you today. And I'm gonna end the recording here, but then we can hear if there are any questions or things that you want me to clarify or other examples that you wanted to ask about. So yeah, thank you for joining us today. We'll see each other next time.