How to Arrange Horizontal and Vertical Menus in WordPress
One of the most common questions I get asked when talking about web design is, “How do I organize my menus?” The answer is a bit complicated because there are multiple ways to do it, and it really depends on what you want to achieve. Do you just want to change the order in which the items appear or do you want to hide some of them? Do you want to add a new menu item or do you want to replace an existing item? There is no one-size-fits-all approach when it comes to organizing menus in WordPress.
Below, I will outline three different methods you can use to arrange your menus in WordPress.
The Traditional Way
The default way of doing things in WordPress is using the traditional horizontal menu. It is very similar to what you would expect to find in a desktop application or on a phone. You have a large area in the center and smaller areas to the left and right. You can add as many menus as you want on each side. When you click on a menu item, you will typically see an arrow to the left or right to indicate the direction the page will travel. This approach has the advantage of being extremely easy to do and requires very little overhead. You can get started with any theme and change the menu links and dropdown menus without any coding skills.
The Modern Way
The second approach is a little more complex but also a lot more flexible. It is made possible by the addition of the navigation menu in WordPress 5.0. The default setting for this is “mobile first,” which puts the most important items at the top. You can change the default settings in the dashboard under Appearance > Reading > Menu Settings. When you add a new menu, it will appear at the top of the list and will be accessible through a tab on the left side of the screen. You can also change the order in which the items appear in the menu by dragging them up or down the list.
This approach has several advantages. For one, it takes advantage of the space above the fold, which is the area of the web page that is visible without any scrolling. It also scales well because you can add as many menus as you want and change the settings on a per-menu basis. Last but not least, it is simple to add a new item or remove an existing item from the menu. Simply click on the menu, click on Add or Edit, type in the new or existing item, and save the menu.
The Hybrid Way
The third approach is somewhere in between the first two. It combines the easy tab access of the mobile first setting with the order of the desktop version. To create a hybrid menu, you will want to use a plugin like My Navigation Menu or WordPress Menu Icons. With these two plugins, you can create a vertical menu from the ground up. Simply click on the plus icon at the top of the page to add a new menu item, or you can use the keyboard shortcut Ctrl+K to bring up the same menu. Once you have a menu icon to the right of the screen, you can drag and drop the items anywhere on the page. When you do this, the page will update itself and the order of the list will change to match the desktop version. One advantage of this approach is that you do not have to worry about the space above the fold because the items will not be accessible unless you scroll down the page.
The downside is that, since this is a mobile first approach, it requires a little more work to move an item to a different position in the list. You can use JavaScript to handle this situation, but you will first have to write some code to make it work. This is not difficult, but it definitely requires a little more planning than just popping open a plugin on your WordPress site.
Which One Should You Use?
One of the challenges of web design is that different people have different expectations. Some individuals want a simple and clean interface while others want an interface that is complex and colorful. In most cases, it is best to follow a strategy of not fixing what is not working and instead focusing on what is.
If you are looking for an easy way to change the order in which your menu appears or add new items to it, the traditional horizontal menu is the approach to go for. You will find many examples of this style of menu on the web. If you are looking for something more complex with many options, the third approach is the way to go. However, if you are worried about having enough space above the fold, the second approach is the way to go. Finally, if you are looking for an eye-catching and colorful appearance, the first approach is the way to go. These three approaches are presented below along with examples of each one. For a more detailed explanation of each one, continue reading.
The Traditional Way
This is the basic and most popular way of doing things in WordPress. It is easy to use and very flexible. All you need to do to organize your menus is create a horizontal navigation menu in the center. To create a horizontal link menu, visit your dashboard, click on the “Appearance” tab, and then click on “Reading.” You will see a menu icon to the right of the screen. Click on it to open the page’s menu. From here, you can easily add or remove items, as well as change the order in which they appear. To add a new item, either click on the plus icon at the top of the page or use the keyboard shortcut Ctrl+K (Command+K on a Mac) to open the same menu. When you save the menu, it will appear at the top of the list and will be accessible through a tab on the left side of the screen. You can also change the order in which the items appear in the menu by dragging and dropping them.
This approach has several advantages. For one, it takes advantage of the space above the fold, which is the area of the page that is visible without any scrolling. It also scales well because you can add as many menus as you want and change the settings on a per-menu basis. Last but not least, it is easy to add a new item or remove an existing item from the menu. Simply click on the menu, click on Add or Edit, type in the new or existing item, and save the menu.
The Modern Way
This is similar to the traditional way but with a couple of differences. The main difference is that, rather than using a horizontal menu, the second approach employs a vertical menu. To add a new menu, visit your dashboard, and then click on the “Reading” tab. You will see a plus icon at the top of the page. Click on it, and you will see an empty space above the fold. To the right of the space, you will see the word “Menu” followed by a square representing a menu icon. Click on the icon to open the page’s menu. From here, you can easily add or remove items, as well as change the order in which they appear. To add a new item, either click on the plus icon at the top of the page or use the keyboard shortcut Ctrl+K (Command+K on a Mac) to open the same menu. When you save the menu, it will appear at the top of the list and will be accessible through a tab on the left side of the screen. You can also change the order in which the items appear in the menu by dragging and dropping them.
This approach has several advantages. For one, it takes advantage of the space above the fold because the items will not be accessible unless you scroll down the page. It also scales well because you can add as many menus as you want and change the settings on a per-menu basis. Last but not least, it is simple to add a new item or remove an existing item from the menu. Simply click on the menu, click on Add or Edit, type in the new or existing item, and save the menu.