HEADER MENU

"Let's go and add the pages to our header menu and then let's decide are we going to use the dropdown menu or the Mega Menu? All right, well let's add your header menu now, and you can edit your header menu, just like your Drawer menu here in the navigation area. But before we do that, we'll just jump over to the headers area where we can preview. You can see the header menu here. It's literally that. It's the menu that lives in the header and it's doing two distinct things. One, it allows us to either have dropdowns from a tab, or it allows us to have Mega Menus that dropdown from a tab. So those are going to be the key choices is for each of your main tabs in your header menu, if there is subnavigation, do you want it to be a dropdown menu or do you want it to be a Mega Menu?

Well, the dropdown menu is really easy to edit. It's just like editing the Drawer menu, so it just happens. It just works. There's nothing for you to do. But then the more complicated one, the more styled one is building out the Mega Menu. So that's going to be the key decision for you to make. But the other key thing about your header menu is the fact that there's only a small amount of space. There's only so many tabs you can have in your header menu. Now I always like to try and keep mine to four if possible. Best practice advice is six, but don't forget, I'm also expecting you to use an Action Section, and you might also have the menu icon that rolls down the Menu Section or the Drawer menu as well. So try and keep it down to five if possible. I like to go with four knowing that, with those four, we can build out dropdown menus or Mega Menus to make it nice, and that way people are only ever really a hover and a click away from any page.

The header itself is sticky, so as people scroll, it's going to stick. So if you're using dropdowns and Mega Menus and indeed Menu Sections and Drawer menus, then you should have a huge amount of real estate there to add all of your pages. I don't care whether you've got 1,000 pages, there should be enough here to put all of your navigation in. So that's going to be the key decision now.

So what we'll do is just jump back over into the navigation area and let's click edit next to the header menu. So here we are in the header menu, and what I'll do now is just show you a few alternative ways that you can update your menus. So here we've got a tab called pages. If I want mine to say products, I can literally write over the menu label and then also write into the URL. So I know this page already exists, so I'm going to type in forward slash products and then watch over here. As I move my cursor out of the box, it instantly creates that page. So it's now letting me, it knows the page exists, so it now lets me edit the page and edit the page settings.

Well, I can now go and remove pages that I don't want. So I'm just going to remove this page here. All right, I'll collapse this. But what we can do now is add a new page. So if I add a page called events, we know the events page already exists, so I could use the link list here. I don't want to create as a new page. So I didn't use the link list and it's created a new page but it hasn't put the forward slash in because I didn't use the link list, it's just typed what I typed in. So in this case, I could type in the forward slash here and there again it knows and it's created that page for me. So that's just a couple of alternate ways that you can sort out your header menu.

All right, well, look at this, our header menu. I'll just drag the events pages in here to create our sub-menus. So these are going to be, we've got two dropdowns now. We've got the products and the events dropdowns. So I'll take contacts out of there and I'll take about out of there too. All right, so that's pretty rapid, right? Once we've got things set up, we can make changes. I can change the order around here as well. I might move products down, might move events down. All right, it's looking pretty neat. I don't need that Mega Menu there because I'm going to add another one, I'll remove it, and I've got my phone number, which I'll leave in.

Now the key thing about your header menu as we've said is we want to reduce the number of tabs. Now the key thing about any MOBLE website is you've got the option to have the Action Section. Now the Action Section rolls down the form and that form is in the header which is sticky, so it doesn't matter where people go on any of your pages, whether they're low down the page, whether they're deep in an obscure page, your Action Section is always going to be there. And therefore the Action Section is the form that gets the most conversions on your entire website. So that can also include things like your contact form, right, contact information, and even a phone number in there.

So when we're talking about a header and we want to reduce the number of tabs, it seems obvious to me if we've got an Action Section, I'm going to take out the contact us tab. So I can just remove that if I don't want it. And for now, I think I'll leave the phone number in the header, so I'll just leave that in. And just like on the Drawer menu with the phone number, if we want users to click on the mobile phone, we don't type in forward slash, we type in tel: and then your phone number. So we'll just press save now and that's the header menu set up. Now header menus now set up with two dropdown menus. It's got the dropdown menu on products and the dropdown menu on events, all right, so now that's where we'll make the decision on if we want to change those to the Mega Menus, which we're now going to do.

I'm going to move on to change those to Mega Menus. But before we do, I'll just show you back in the fonts area where we go if we want the font to change in the header. So back over in styles and fonts, I can roll down to menu and you see the first one is header text. If I click make font here, I can change the size slightly. So I might make this slightly smaller in this instance, and you know what, I might decide to make that uppercase. So when anyone adds new menu labels to their header menu, it would automatically make it in uppercase. So that's a cool little trick for your header, and you can decide. You might decide that your header text size is too large and that is true when you have a Theme. Depending on what font you use, you might decide just to make it a little bit smaller, which you may well do. This is a nice size here, 0.8125. And then I'm not too sure if I like mine uppercase yet, so I might decide that later. But for now, we can just leave that and we can move on."