How to Edit Menu in WordPress – Use These Easy Steps Below

how to edit menu in wordpress, how to edit menu bar in wordpress, how to edit menu name in wordpressYour 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.

Show/Hide Table of Contents

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 edit menu in wordpress, how to edit menu bar in wordpress

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.

Appearance tab to Menus in wordpress, how to edit the navigation menu in wordpress

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.

Create Menu in WordPress, how to edit menu items in wordpress

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

add menu items in WordPress

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.

menu structure

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.

add custom link menu

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.

Creating Multi-Level Menu in WordPress, how to edit menu name in wordpress

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.

WordPress menu setting

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.

Menu Manage Locations

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.

Appearance tab to Themes option

From there press the “Customize” button and wait for the next page to load.

theme Customize button

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.

create menu in WordPress Customize area, how to edit a drop down menu in wordpress

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.

Screen Options to enable menu CSS Classes

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.

add custom CSS classes in WOrdPress menu, how to edit the top menu bar in wordpress

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.

design CSS in WordPress Additional CSS area, how to edit menu css in wordpress

#blog-item-menu  li.menu-item a {
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.

editing menus in wordpress

editing menus in wordpress

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.

Leave a Comment

Related Post