Join Morten Rand-Hendriksen for an in-depth discussion in this video Using menus, part of Start with a Theme: Twenty Fourteen.
When you first activate Twenty Fourteen, the Main Menu found up here in the right hand corner is set to default, meaning it displays your static pages in alphabetical order and with parent-child relationships, just like you see here. I told you that this theme actually ships with two menu areas, you have the Main Menu up here and you have an option additional menu that appears in the side bar. So let's take a look at both of these menus. If I go to the site name and menus in my tool bar, I go directly to the menu customizer.
And here you see I've already set up two custom menus for myself. I have the Main Header Menu, and I also have one called Sidebar Menu. Now, I can apply these menus to my two menu areas. So let's start with the Main Header Menu. Here, I can go to the bottom of my custom menu and select the theme location for the menu, so I'm going to set it to Top Primary Menu, and click Save Menu. Now, this new custom menu will override the standard menu in the theme, and now I have a Home button, a drop down for my categories, drop down for the About, and also a Contact button.
So these all correspond to either pages or categories. This Main Menu will stick to the top of the screen as the user scrolls up and down. And, if I reduce the size of my window, and as I scale down the window, you'll see that when we get to a small enough size, the menu will be moved into a mobile-friendly menu that is found under this hamburger icon. So when I click on the hamburger, I get the full menu listed here. And it's touch-friendly, so if you're using a cellphone you can easily click on these buttons. Now, let's take a look at that optional Sidebar Menu.
I go back to the Toolbar, select Menus, and this time I'll go to Manage Locations. That way I can manage both locations at the same time. So here, I'm going to go to the Secondary Menu on the left sidebar and select my Sidebar Menu that I created earlier and click Save Changes. Now, when I go back to the front page, you'll see we have an additional menu here on the left-hand side. Now, don't confuse this with the type of menu you'd get if you added a custom menu widget in your Sidebar.
This menu is independent of the sidebar, and displays at the top of your content no matter what. However, if I reduce the size of my window again and make it small enough that it doesn't have the right hand sidebar you see that menu disappears. In fact it gets moved all the way down to the bottom of the content here. So this really is a secondary menu. If you expect a lot of people to visit your site using mobile devices like tablets or phones, you have to keep this in mind, you can't put any kind of important links in that menu, because it will get pushed down to the bottom of the page.
Now, I'm sure you're wondering how I created that categories drop down. I'm going to show you a little trick here, it doesn't have anything to do with this theme but it's still worth noting. If I go back to my Menus and I go to the Main Header Menu, which is at the top. You'll see I have a button here called Categories and I've listed the categories here underneath. Now getting the category links is easy. You simply go to the Categories option here and then you pick the categories you want to display, but the Categories button itself is actually a custom link that I created where I set the URL to just the pound sign.
The pound sign means when you click on it, nothing happens. The whole point of this is to create a menu item that does nothing, that will just open the sub-menu. So all I did was create that sub-menu and then I docked the actually categories underneath it. So now you know. When you set up your site using the Twenty Fourteen theme, my advice to you is to use the Main Menu as a standard menu display whatever you want in the Main Menu. And then use that optional sidebar menu to display less important content.
For example, links out to other sites or links to social media or other things. Just keep in mind that it'll get pushed down to the bottom of the page if people are looking at it on mobile devices.
Skill Level Beginner
<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">Q: Where is the WordPress Masterclass playlist mentioned in this course?</span>
<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">A: This is the link to the WordPress Masterclass playlist: </span><a href="http://www.lynda.com/curatedplaylists/wordpress-masterclass" target="_blank" style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">http://www.lynda.com/curatedplaylists/wordpress-masterclass</a>.