Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 7 – Part 6 – Create the Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

The next thing we’re going to do is create our menu for this Professional Services/Business website using the Genesis theme. We’re going to start off by creating the menu under Appearance and Menus.

Assign Menu to the Primary Navigation

I’m going to call the first one the Main Menu but really, you can call it anything you want. The thing to do is to assign the menu to your primary navigation, hit Save, come down and select your pages. I’m going to take Articles, Testimonials, About, Finished Projects, all these pages and Add to Menu.

Obviously, these aren’t page order and they aren’t displayed the way we want them to display. What we’ll do is drag Articles down to the bottom because that’s the very bottom one. We want About Us, Projects and Testimonials so we’re going to have About, Finished Projects, Testimonials and the Finished Projects has the Edmonds View Remodel.

Notice that when I hover over here like this, what happens is it indents. What that does is make it a child or drop down of the main menu item. We have Finished Projects, drag that in there, Edmonds View Remodel, East Side Craftsman and West Seattle View Home.

All three of those things are going to be there and Testimonials then Services. The Services had Remodel Design, Builder Spec Home, Custom Home Design and I want the Custom Home Design up at the top, Remodel Design at the bottom. So we’ve got our basic menu laid out, it’s very simple to do right? Hit Save and we’ve got our main menu.

Creating a Custom Link

Actually, we don’t have a Home page tab here so in order for us to create a Home page, what I would do is create a Custom Link. Using this Custom Link, you’d put your website address and say Home, add it to the menu. It got added to the bottom so let’s drag it up to the top.

You can use this Custom link to add any kind of link to your menu. It can be a link to some place else in your site, you can use it to create a dummy link. The Custom link is very powerful and there are other things that you can add to the menu as well.

For example, you could add categories to the menu and if we open up screen options here for a moment, you could even add tags to the menu but we’re not using categories and tags right now so it doesn’t matter. In any case, it’s a drag and drop sort of thing.

Edit the Navigation Label

This doesn’t have to be short but you can edit the way this reads. For example, About could actually be About Us. We just changed the navigation label, it tells you what the original one was here and now, your new navigation label.

The same thing is true with Finished Projects, we could get rid of Finished and just have Projects and under Services, we could simply have Services. We can modify what happens in the menu by changing that navigation label. Hit Save and we’ve got the basics of our navigation menu laid out.

We come over and take a look at the site and refresh it. Now our menu shows up here in this primary menu location, that’s what this is right now. You can see the Edmonds View Remodel, East Side Craftsman Home, drops down, it comes to Services, those things dropped down and you can just move around the site.

If we go back to Home, it shows you the Home page before you start adding the Agency part to it. The Genesis theme does have some menu settings so if you come back over to your Genesis Theme Settings, scroll down and take a look at your primary navigation menu, when we get around to setting this up, we’re going to put the primary navigation menu in a widget, that’s what this is. This is actually in a widget, this actually isn’t in its primary location.

Include Primary Navigation Menu

What you do in that case is simply remove the “Include Primary Navigation Menu”, hit Save and that menu is going to go away now. For the time being until we get that whole header thing figured out and set up, we definitely want to include the primary navigation menu. If we remove “Enable Fancy Dropdowns”, hit Save Settings and refresh it, you still get a dropdown but it doesn’t have a nice smooth movement.

The one thing to say about that is that the fancy dropdown actually works very nicely in the mobile device, that’s something for you to consider in this process. In fact, what we’ll do is take a look at what happens to this when it goes mobile.

We will enable the fancy drop downs and we’re not going to enable secondary navigation. We’ll talk about the location of secondary navigation when we talk about laying out the home page and the parts of the Genesis theme page in next week’s lesson.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment