We all need landmarks in the digital world, right? However, talking about the ecosystem of a website, you should refer to the navigation menu as a comrade. In the end, is just a map that guides you to dig deeper and fully enjoy the site experience.
It may sound naive, but it is what makes users leave a website without hesitations. A bad navigation comes along with frustrations and an illogical flow. The good news is that WordPress includes a solid menu manager tool to keep people on track and convince them to come back. Who doesn’t aim for such a behavior, right?
Step 1 — Create a Custom Menu
You can easily create navigation menus in WordPress. Log into your Dashboard, go to Appearance → Customize → Menus and click Add a menu button.
Now you’re able to set the location of your menu by checking the field you find it suitable: Footer, Primary Header, Secondary Header and Social Menu.Once you have a convenient name for it, just press the Create Menu.
Step 2 — Add Items to your Menu
Now that you have a menu and a location for it, all you need to do is to add menu items by:
- Clicking on the Add Items button and choosing the menu item type from the list that appears on the right.
- After selecting the desired item from the list, please click Add to Menu button.
You can add several types of menu items to your custom menu such as:
- Page: Adds a link to another page on your site.
- Link: Adds a custom URL linking to another site.
- Category: Shows a feed of blog posts from a given category.
- Tag: Shows a feed of blog posts from a given tag.
- Post: Links directly to a blog post on your site.
Managing the Mega Menu
The main menu area on SILK is not just a simple menu. We like to call it a Mega Menu that will also display posts for you, giving your visitors more to choose from.
If you want a certain menu item to be mega (awesome, ultra, and so on) you need to make it a category link (you can add these from the menu editing window, under the Categories dropdown). Then we will automatically display beside its submenus, a maximum of 4 latest posts from that category, beautifully styled to match the rest of the site.
NOTE: If the elements that you’d like to add to your menu are not available on the left side of the page, just click the Screen Options button at the top right side of the page. Once you did that, a list of different modules will be displayed. You can check now all the missing elements from the menu
Step 3 — Organize your Menu
With all the menu items in place, you can change the order and the placement of the menu items by simply using the drag-and-drop gesture. Using the same system you can even create sub-menus or drop-down style menus. Just drag the individual items to the right and set them under a parent tab. In case you want to revert your changes please drag the menu items to the left to make them parent again. Feel free to play around, and find the right scheme for your particular needs.
Step 4 — Assign it to a Menu Location
Everything is pretty much set once you reached this step. The next phase is to let WordPress know where you need the navigation menu to be showcased. To do that, browse to the Menu Locations area and depending on what theme you’re using, you’ll be able to choose from the available Menu Locations. Simply assign the previously created menu to the desired Location, and you are off to the races.
- The Magical Number Seven (plus or minus two)
This is because short-term memory holds only seven items. It’s a fact, not a wishful thinking thing. With fewer menu items, your visitors’ eyes are less likely to scan past important items. Every time you remove a menu item, the remaining items become more prominent. Challenge yourself to limit your navigation to five items.
- Avoid Drop-Down Menus
By not using drop-down style menus, we reduce the possibilities of the website visitors to miss the relevant content. Keep it simple.
How do I create a un-clickable parent tab for my sub-menu?
To create a menu item that is not clickable but will still contain sub-menus items, just add a Custom Links menu item and add a # symbol in the “Link Address (URL)” field.