Menus are an integral part of nearly every website and are usually placed at the top of web pages (header) or the very bottom (footer). Visitors love them because they allow for quick access to desired parts of the website, including whole sections or specific pages such as contact forms. In return, they can view content that unexpectedly piques their interest, which would otherwise require intentional searching. This affects your SEO positively too, especially the average time spent and bounce rate. With key benefits laid out, let’s get into how to edit a menu in WordPress.
1. Edit a menu within WordPress
Like we mentioned in the guide for making a drop-down menu in WordPress, installing a WordPress plugin only bolsters the functionality of the default menu interface. We’ll assume you’ve already created one, whether through sub-method 1, steps 1-6 under the “Menus section” or the “WordPress Customizer”. So, before you start, chose the right one at the top of the page, under “Select a menu to edit:” by clicking Select. You’ll see these 4 sections within the menu editing interface in WordPress:
1. Left-hand side
The following options will be visible from the get-go:
- Posts and Pages: Both options you to link a menu item to one of the pages and posts.
- Custom Links: Allows adding custom URLs to any web page, internal or external. Adding “#” as the URL makes the menu item non-clickable. Alternatively, it allows you to add anchor links for sections on the same page.
- Categories: Make the menu item link to a category on your website.
- Custom CSS: Allows configuring CSS of individual menu items such as font color and size, position, and behavior.
- Testimonials: Advanced WordPress themes implement this for quick-scrolling to the Testimonials section or a separate webpage.
These entries are available but hidden. To unveil them, click on Screen Options in the upper right corner, and put a checkmark in front of:
- Title Attribute: Adds a tooltip for the menu item that appears when a user hovers over it.
- Link Target: Allows users to add a Custom Link that opens in a new tab or a window. Only recommended for external URLs.
- CSS Classes: This permits defining a CSS class and adding multiple menu items to it. Configured CSS then applies to all menu items in the group.
- Tags: Add a link to a page that lists all posts and pages under a specific tag.
- Description: This option allows adding a description for a menu item, visible on the backend, frontend, or both.
- Link Relationship (XFN): Permits you to generate XFN attributes that describe your relationship with the authors/owners of an external website to which the URL leads.
2. Right-hand side (Menu Structure)
We already described how rearranging items and creating sub-menu items works in the drop-down guide above. We didn’t specify that clicking on the item expands it, allowing you to edit the Navigation Label (name on the backend), Title Attribute, URL, or other option-specific text fields.
3. Menu Settings
The small section in the bottom right corner allows you to:
- Auto-add pages: Putting a checkmark in front of “Automatically add new top-level pages to this menu” will degrade the menu tidiness rapidly, so we recommend keeping it disabled.
- Display location: Unless you use a theme that allows left or right-oriented menus, you’ll see the following options:
- Primary Menu: Refers to the menu at the top. Might be named Header Menu, Top Menu, or simply Primary.
- Secondary Menu: Some WordPress themes offer a secondary menu, usually located above the footer/below the header. In many cases, it’s titled Social Links Menu.
- Footer Menu: Refers to the menu at the bottom, and might be called Bottom Menu or just Bottom.
4. Menu Locations
“Menu Locations” is a tab next to “Edit Menus” in the top left corner. And, while it allows you to configure which menu appears in which location, not all WordPress themes you install will have it. If yours does, after selecting one from the drop-down list under “Assigned Menu”, simply click on Save Changes.
2. Edit a menu through a dedicated WordPress plugin
Because there’s a wide array of plugins available, and we can’t demonstrate them all, we’ll speak in general terms. Based on the way of editing a menu in WordPress, plugins fall into these 2 categories:
1. Expand built-in backend functionality
After activation, go to Appearance > Menus again. Click a button or put a checkmark in front of, for example, Enable <plugin name>. Right away, you’ll see new entries appear underneath the visible menu options described above. In many cases, there’s a dedicated button to access a custom editing menu interface for extra tweaking. Most of the free plugins will be of this type. The most popular example is Max Mega Menu (https://wordpress.org/plugins/megamenu/).
2. Allow for frontend customization
This type of plugin uses a WYSIWYG (what you see is what you get) editing model, e.g., lets you see changes in real-time. It expands the default Live Preview interface to add more options for customization. It also lets you click to edit almost any menu element on the page. It’s the preferred option for mobile-friendly websites, rearranging menu items or sub-items, and adding custom CSS. The Pro version of the plugin above has this functionality. Plus, well-known free options such as Responsive Menu (https://wordpress.org/plugins/responsive-menu/) utilize it too.
3. Customize menu via WordPress page builder
If you’re using one of the top page builder plugins for WordPress, it most likely offers a way to edit a menu. Its Live Preview, click-to-edit, and drag-and-drop features also make things drastically easier and more effective than the methods above. As an example, editing a menu in WordPress via Elementor works like this:
- Click on Pages in the left sidebar in the WordPress Admin Section.
- Click on Edit with Elementor below the page that contains the menu.
- Select the existing menu by clicking on it.
- In the Edit Custom Menu or Edit Nav Menu widget on the left side, there are 3 tabs:
- Content: Edit, add, or reposition menu items like in method 1.
- Style: Configure position, height, width, text color, spacing, background color, borders, padding, shadows, animations, blur, tooltips, icons, images, etc.
- Advanced. Additional settings.