We notice lots of contestants having problems with menus of their website. Some of them do not know the use of menus, some have no ideas how to start and the others want to change the theme’s menu but they can not.
At the most basic level, a WordPress menu is a collection or list of links. The most common placement of a menu is in the site navigation area or navigation bar and is referred to as a navigation menu.
Each link in a menu is called a menu item. Some menu items may have sub-menu items that are displayed in a drop down menu.
Below you’ll see a site with a primary navigation menu, a secondary header menu, and a drop down menu of sub pages under the Assessments menu item.
WordPress menus can be used almost anywhere in a WordPress site. In addition to your website navigation menu, you can display a WordPress menu in the header, in a sidebar, in the footer, or in any widgeted area.
Why use a menu?
You may be reading this thinking, “Yeah, I get using a menu for my website navigation bar, but why use a menu elsewhere on my site? Why wouldn’t I just list the links?”
In a sidebar, footer, or other widgeted area, there is no editor available to help you add links, so listing links requires you either to write HTML code to create the links, or first create the list of links in a page and copy and paste the code into the widget. What a pain!
Menus make the process much easier!
WordPress menus allow you to quickly create a custom menu and easily add pages, posts, category archives, tag archives, author archives, or custom links.
On the menu screen, you can change the name and titles of any menu items without affecting its permalink (URL), and with its drag-and-drop functionality, you can change the order of the menu items, and create drop down menus. Plus, with the WordPress Custom Menu Widget, you can add a custom menu to any widgeted area on your website — all without having to touch any HTML!
Plus, custom CSS can be written for menus in the sidebar and footer to display them in a bulleted list class, to use icon fonts, images, or buttons, and to add hover effects.
Responsive Website Menus
Responsive web design — where a site is designed to respond to, resize, or adjust itself, based on user behavior and the viewing environment — requires additional design considerations for website menus. Forethought must be given to how the menus will be displayed as screen sizes get smaller (or larger is using a mobile first approach).
One of the most common mobile menu designs is to use the “Hamburger” — an icon displaying three short horizontal lines that represents a menu. When clicked, the hamburger icon expands downward to show the full website menu (as shown below). If multiple menus are used (as shown below), whether or not the menus will be combined and how that will work must be addressed.
If you are reading at this point, you have acquired basic understandings about website menus. Let’s see how you create your own menu on WordPress.
You must define a menu before you can add items to it.
Your new custom menu has now been defined.
Adding Items to a Menu
You can add different link types into your menu, these are split between panes left of the menu you’re currently editing.
Your custom menu has now been saved.
Note The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Tags are hidden by default.
Creating Multi-level Menus
When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.
The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.
To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.
Adding Your Menu to Your Site
If your current theme supports custom menus, you will be able to add your new menu to one of the Theme Locations.
If your current theme does not support custom menus, you will need to add your new menu via the Custom Menu widget in the Appearance Widgets Screen.
Congratulations! Your new custom menu has now been added to your site.