The next thing we need to do before styling the header is to create the menu for this Professional Services website we’re creating. We’ve created all these pages but we don’t have any menus. When we look at the site as it stands we don’t have a menu here at all. We can’t go look at any of those pages except by going to the backside and getting to them. So let’s build a menu.
Build the Main Menu
That happens here under Appearance and Menus. And there are no menus here so we are going to create a menu. We’ll call this one the main menu. Create it. Now the way you add pages to the menu is you put check boxes in them.
Add Pages to the Menu
We’re not going to add the 404 page to it but we’ll add What Clients Say About Rick Anderson Architects, About Rick Anderson Architects. We’ll do Seattle Area Finished Projects and we’re going to add all three of those plus this page here, Custom Home Designs Services. We’ll add Articles and we’ll add Unique Architectural Design in the Seattle Area.
Then we’ll click Add to Menu. Now they are all added here. This one here is our home page, remember. We’re going to move it up to the top of the list because that’s where we want our home page. And then we’re going to call it Home. As you see we can change the navigation label.
Title of the Page and Navigation Label
This is that fourth part of what you can do with the title of the page. It’s, one, the title of the page and it’s the meta title, it’s the slug and it’s the navigation label. And all of those can be changed just as we’ve changed our home page name.
The next one is Testimonials and that’s really what I want to call it, Testimonials. And I don’t want it there in the list. We wanted Services second. To move them around the list you just drag and drop. I’ll drag it up and I’m going to replace this with Services. And then under Services we had Builder Spec Home Design.
Create a Submenu
Now in order to make it a submenu all you do is drag it off to the side there. Builder Spec Home Design is going to be a sub menu of Services. And Custom Home Design Services is the same way. It’s going to show up like that and I’m going to bring it to the top of the submenu. So it’ll be Custom Home Design Services, Builder Spec Home Design and then the third one is Home Remodel Design. We’ll add that. So that’s our Services menu with it’s drop downs.
Then we’re going to come to our Finished Projects and that’s not part of that so we’re going to bring it out to the top, Seattle Area Finished Projects. And I’m just going to take our Seattle Area there. So, just Finished Projects. And then we’ve got our West Seattle View Home as a drop down from that. Our Edmonds View remodel as a drop. Our Eastside Craftsman Home as a drop down.
Then we’ll put our About and that’s just going to be called About. And Testimonials and Articles. So, that’s our main menu. Let’s hit Save Menu and then come back over here to refresh the site. Now we’re going to have a menu that shows up. We still have to style the menu but at least the menu now shows up.
Build the Footer Menu
We are also going to create a Footer Menu. So we are going to create another menu, Create New. This will be our Footer Menu. Create the menu. The Footer Menu is going to have the Home Page on there. We’ll put the Articles page on there. We’re going to put the About page on and I think we’ll also add Testimonials. It’s going to be a smaller menu.
Again, Home will come to the top and we’ll call it Home. Testimonials, About and Articles. We can save that menu. Now when you refresh this page…that Footer Menu showed up instead. You don’t have to worry about that. We will learn how to assign menus to their appropriate spots like down here in the Footer and up here in the main Header area. But before we can do that we have to actually have a menu.
How to Add Icons to the Menu
I want to show you how you can add icons to the menu. Agility 3.2 fully implements Font Awesome Icons. So, let’s say you wanted to add the Home icon to the home menu. Let’s go to FontAwesome.io and go to their icons. Then come down here to search icons because they’ve got tons of icons here.
You’re going to see lots of opportunities to use these icons but I just want to show you how to add them to the menu. If you want to add the Home icon, you can see there’s the typical Home Icon so you click on that and then scroll down here.
To use this all you have to do is copy this entire thing, iclass= etc. Copy that code. You don’t have to know what it is. All you have to do is copy that entire thing and come back over here to menu. So we’re going to come back over to our main menu and select it. Go to our Home and paste that directly next to the term home. I’m going to give it one space beside it and save menu.
Now…oh you can’t see it because the Footer menu is showing up there right now. But you’ll see it when we set that menu up. We’ll have the home icon there, exactly like this. The little home icon.