Your menu is the main thing that most people notice on your website when they first open it. Having it as perfect as possible is a good way to gain their attention.
Of course, it should also be functional and it should have important links in it. Sometimes you may want to edit its appearance, tweak some small features, or even have it as a multi-level menu.
I will explain and talk about all of the things you can do to manipulate the menu bar into looking as you want it to look.
At the same time, I will provide tips and tricks when using the WordPress platform to make the process more efficient.
How to Define a Menu in WordPress
This is the first thing that you should do at your website, defining a menu. This will allow you to add items to it and to customize it as per your liking.
Steps to Define a Menu
1. Login to your WordPress Dashboard
2. From the ‘Appearance’ tab on the left find ‘Menus’ and click it. This will open the Menu Editor page.
3. Add your new menu by clicking on the button at the top of the page.
4. Enter the name of your menu in the “Menu Name area“.
5. Click the ‘Create Menu’ button to conclude the process.
After you have completed the steps above now you are ready to continue with the next step which is to add items to it.
Also Read: How to Change Site Title and Tagline in WordPress Website
How to Add Items in a Menu in WordPress
This is where the customization of the menu truly begins. You can add different items in the menu from categories to links which can be internal and external. You can link a specific web page from your site or even link another website altogether. The process of adding these items it’s not complicated and if you follow the steps below you will be able to do it yourself easily.
As you can clearly see from the picture above there are two panes. The left one is the pane where you will find the categories, posts, pages, and even add the custom link. On the right, you will see the current structure of the menu and you can do a lot of things there from rearranging the items to deleting them.
To add an item to the menu all you have to do is click the checkbox button on the page, posts, or category that you want to add and press the ‘Add to Menu’ button. For the custom link, you will have a different setup.
You should add the website address that you want to on your menu in the URL area. The display name of which the link will appear on your menu is going to be set in the area of Link Text. After you have done that you will need to press the ‘Add to Menu’ button and you are done.
Creating Multi-Level Menu
You should have a clear understanding of how you want your menu to look before starting to make customizations to it. Sometimes, for example, you may want the categories to be shown on the menu when you hover over the categories tab. This can be accomplished with a multi-level menu. You can have a main section heading in the menu with subsections under it.
From the Menu structure panel, you can add the multi-level menu by doing a simple drag and drop. In the example above you see that the Technology, Crypto, and Apps & Games categories are slightly to the right. That indicates that these are child items to the main item which in this case is Home.
What will happen is that the home item on the menu when hovered will look like the picture below. You can achieve that by selecting the item that you want to be a child and dragging it under the item that you want to be a parent. It’s as simple as that, then all you have left to do is save the menu and see the results.
After you are done with the menu and now are ready to implement it to your site you have to add it. You can do that in three different ways. First, it can be added on the Menu Settings by checking the checkbox which is located at the bottom of the ‘Menu Structure’ panel as shown in the picture below.
Also Read: How to Open WordPress Menu Item in a New Tab or Window
The second option is to click the ‘Manage Locations’ which is at the top of the Menus page just as shown in the picture below. From there you select the assigned menu to the location that you want to display it.
The third option of how you can do that is in your theme customization page. You can find that by going to Appearance and clicking Themes.
From there press the “Customize” button and wait for the next page to load.
Depending on what theme you are using for your website you will have different options available. Most of them that I have encountered have it labeled as Menus and from there you can select the location of the menu, change it, and even add a second menu to a different position.
Doing this way may be better for most people since you can see the changes in the website in real-time. And that’s all for the changes you can do to the menu without getting to appearance which comes next.
Also Read: How to Edit Footer in WordPress – Following 4 Easy Methods
How to Edit the Appearance of a Menu in WordPress
Changing the appearance of a menu with WordPress is easy and depending on what theme you are using you may have different options.
If the theme allows you to do changes in the Theme Customizer then it’s going to be really easy but if you want to add your own CSS code to it you can also do it.
This is a bit harder to pull off and more professional so only make the changes if you know what you are doing. Usually, the free themes that you can get on the store don’t allow you to make a lot of customizations on the color of the items on a menu or whatever you may want.
Those options will become available if you purchase the pro version of the theme. First, you need to navigate to the Menus page from Appearance again and press the ‘Screen Options’ button at the top of the page.
From there make sure to select the checkbox where it says CSS Classes, then close the window again by pressing the button.
What this does is that it enables you to add custom CSS classes to the items on the menu. This is really important since now you have the ability to change said CSS class to make an impact on the menu. Let’s look at some of the changes you can make to the items.
Also Read: How to Change WordPress Excerpt Length – 4 Easy Ways
You will need to click the ‘Edit CSS’ tab from the “Appearance” tab to Customize>>Additional CSS. There you will be able to add the custom CSS that you want. Let’s look at an example of how you can change the color of the text in the menu items.
color:#00ffd5;
}
With this custom CSS code, you can change the color of the menu items. The #blog-item-menu is the ID I gave the items on the list that is displayed in the navigation menu. You can use the ‘Inspect Element’ tool to find the one on your website if you are not sure which one is yours.
That can be done only if you are using Google Chrome, and it’s really easy, just hover over the element and press the right-click button and select ‘Inspect’. The piece of code that I displayed there managed to change the color of my menu from white to a teal, look at the difference in the pictures below.
Having this CSS control over your menu will allow you to make all the necessary changes that you want and it’s a really powerful tool to have at your disposal.
Closing Thoughts
Learning how to edit a menu in WordPress is important for everyone that is starting a new website. It will allow you to make your users feel more welcomed if you are the one that is handpicking the customizations of the menu.
You may have an idea to make it feel and look in a way that fits the idea of the whole site better and you can easily do it with the information that is provided in this article.
