There are times when it makes sense to edit a menu on WordPress. You might want to create a mega menu to display all your web pages. Or, you can change the menu colors to reflect your branding. However, without coding skills, it can be difficult to achieve.
Fortunately, there are plenty of ways to edit a menu on WordPress. Beginners can use the built-in options in the dashboard or install a handy plugin. Meanwhile, more experienced users can apply custom CSS đ¨ to edit the default WordPress menu.
A WordPress menu gives your content order and structure so that visitors can easily find what theyâre looking for. However, while the default WordPress menu is sufficient for some websites, you might like to edit your menu to make it more unique.
For example, you can change the colors and fonts to slot in nicely with the rest of your site. Plus, you can add your most important pages, posts, and products. Or, you might even include elements like images to make it more visually appealing.
On the other hand, you can add contact details or links to your social media. Or, you can create dropdown menus or mega menus if you have lots of content pages. This is a practical option for a limited space.
Lastly, it can be a good idea to change the position of your WordPress menu (which is determined by your theme). Typically, your menu is displayed in your header. But you might also be able to configure a secondary menu, footer menu, or a mobile menu.
How to edit your menu on WordPress (4 ways)
Now that you know why it can be a good idea to edit a menu on WordPress, letâs take a look at the best ways to do it.
- Edit your menu in the WordPress dashboard
- Edit your menu using the Full Site Editor (FSE)
- Edit your menu using a plugin
- Use CSS to edit your menu on WordPress
There are two ways you can edit a menu on WordPress with built-in options. The first approach weâre going to show you works with classic WordPress themes. The second approach, which weâll cover immediately after, works with block themes.
For the first method, weâre going to explain how to edit your WordPress menu with Neve. Itâs a fast, lightweight theme that lets you change plenty of website parts.
Now, to access your menu settings, head to Appearance > Menus in your WordPress dashboard. Then, you can select a menu from the dropdown or create a custom menu using the link:
![How to create a WordPress menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1147/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/create-new-menu.jpg)
In the Add menu items section, you can add important pages and posts to your navigation menu by checking the relevant box(es). Then, click on Add to Menu:
![Edit a Menu on WordPress: Add new menu items.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1110/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/add-menu-items.jpg)
![Edit a Menu on WordPress: Add new menu items.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1110/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/add-menu-items.jpg)
You can reorder your menu by dragging and dropping the items around.
Additionally, you might want to create a sub-menu that opens beneath your main menu items. To do this, just drag the item slightly to the right.
Once you drop the item in place, youâll see the words âsub itemâ appear next to it:
![Add sub items to menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1110/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/add-menu-items-1.jpg)
![Add sub items to menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1110/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/add-menu-items-1.jpg)
You can also add WordPress categories and custom links to your menu. Plus, if you run an ecommerce store, you can include some WooCommerce endpoints like account details and orders.
If you want to edit a menu on WordPress by adding more content types, click on Screen Options:
![How to edit a menu on WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1170/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/screen-options.jpg)
![How to edit a menu on WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1170/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/screen-options.jpg)
Use the checkboxes to add extra items like products and tags. You can also remove existing items here.
Then, youâre able to determine the exact location for your menu in the Menu Settings at the bottom of the page:
![Edit a Menu on WordPress: How to change the position of your menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1735/h:509/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/menu-settings.png)
![Edit a Menu on WordPress: How to change the position of your menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1735/h:509/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/menu-settings.png)
Your theme might let you create horizontal menus, mobile menus, or footer menus. Once youâre happy with the changes, click on Save Menu.
If youâre using a block theme like Neve FSE, youâre able to edit your menu using the Full Site Editor (FSE). To get started, go to Appearance > Editor > Navigation in your WordPress dashboard.
Then, click on the pencil icon to open the menu for editing. Here, youâll see a preview of your menu, which updates in real time as you work.
If you want to add more menu items, simply click on the + icon within the block to search for pages and posts, or to insert custom links:
![Edit a menu on WordPress with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1093/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/add-links-fse-1.png)
![Edit a menu on WordPress with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1093/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/add-links-fse-1.png)
You can change the menu position using the arrow icons in the toolbar. And, you can use the toolbar to add a submenu to your navigation:
![Add a submenu with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1006/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/submenu-fse-2.png)
![Add a submenu with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1006/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/submenu-fse-2.png)
Again, you can add pages or add custom URLs. Then, use the block settings to your right to label your menu item(s) and add links.
One of the best parts about editing a menu with the FSE is that thereâs much more flexibility and built-in options to take advantage of. For example, if you want to add a search block or social icons that link to your profiles, you can do it easily by clicking on the + icon in the editor. Then just search for the blocks you want and click on the ones youâd like to insert:
![Add social icons to WordPress menu](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:877/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/social-icons-fse-1.png)
![Add social icons to WordPress menu](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:877/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/social-icons-fse-1.png)
Meanwhile, if you open up the Styles section, you can click on Colors or Layout to change the appearance of your menu. For example, you can adjust the text color and increase block spacing.
Or, click on Blocks > Navigation to change the font, text size, letter spacing, and more:
![How to change styling of your WordPress menu with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1045/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/fse-menu-style-1.png)
![How to change styling of your WordPress menu with the FSE](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1045/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/12/fse-menu-style-1.png)
When youâre satisfied with your menu layout and design, click the blue Save button on the top right to save your changes. With the FSE, you can add navigation menus to any location on your website.
If you want to edit a menu on WordPress by building more complex menus, like mega menus, the built-in options may not be sufficient. In this case, you can use a plugin to create a mega menu consisting of multi-column dropdowns.
This is a great option for ecommerce stores that have lots of pages to display. Better yet, you can install a free plugin like Max Mega Menu to add this functionality to your site:
![How to install Max Mega Menu to edit a menu on WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:649/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/install-mega-menu.png)
![How to install Max Mega Menu to edit a menu on WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:649/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/install-mega-menu.png)
Upon successful installation, click on Mega Menu > Menu Locations:
![Edit a Menu on WordPress: Change menu locations.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:577/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/menu-locations.png)
![Edit a Menu on WordPress: Change menu locations.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:577/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/menu-locations.png)
Here, youâll see the areas where you can add a mega menu (dependent on your theme). To enable the mega menu, select an option and tick the Enabled box:
![How to edit a menu on WordPress using a plugin.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1106/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/enable-mega-menu.png)
![How to edit a menu on WordPress using a plugin.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1106/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/enable-mega-menu.png)
Under Event, you can determine how visitors trigger the menu. Then, use the Effect settings to change how the menu opens.
Now, switch to the Menu Themes tab to customize the appearance of your menu. First, youâre able to change the arrow style and line height:
![How to customize mega menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1105/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/edit-menu-themes.png)
![How to customize mega menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1105/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/edit-menu-themes.png)
Meanwhile, if you head over to Menu Bar, you can alter the menu height and apply a background color. Further down, you can define the appearance of your top-level menu items:
![Edit a Menu on WordPress: How to edit top level menu items.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1878/h:1133/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/change-top-items.png)
![Edit a Menu on WordPress: How to edit top level menu items.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1878/h:1133/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/change-top-items.png)
For instance, you can change the font, colors, spacing, borders, and more.
You can do the same for your submenus in the Mega Menus tab. Plus, if you add any widgets to your mega menu (like search bars or galleries), you can customize their appearance in the Widgets section.
Once youâve saved all the changes, youâre ready to add the mega menu youâve created to an existing or new menu on your site. So, youâll need to head to Appearance > Menus.
Now, select the relevant menu, and you should see Max Mega Menu Settings appear in the Add menu items section:
![Max Mega Menu Settings.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1154/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/mega-menu-settings.png)
![Max Mega Menu Settings.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1154/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/mega-menu-settings.png)
In order for this to work, youâll need to make sure that you enabled the plugin in the Menu Locations page. You should see a Mega Menu button appear when you hover over each menu item:
![How to enable a mega menu WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1533/h:908/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/mage-menu-change.png)
![How to enable a mega menu WordPress.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:1533/h:908/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/mage-menu-change.png)
If you click on this button, you can configure display settings for that specific item. Make sure to save your changes. Then, preview your menu on the front end:
![Preview mega menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:940/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/finishd-mega-menu.png)
![Preview mega menu.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:940/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/finishd-mega-menu.png)
If you need to tweak more settings, return to the Mega Menu tab.
Finally, if youâre a more advanced user, you can edit a menu on WordPress using CSS. While you can edit your site files directly, itâs safer (and easier) to use the Additional CSS box in the WordPress Customizer.
You can usually find this right at the bottom of the Customizer tabs:
![How to edit a menu on WordPress with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1004/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/customize-css.png)
![How to edit a menu on WordPress with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:1004/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/customize-css.png)
However, first, youâll need to identify your themeâs menu class. To do this, right-click on your menu and select Inspect Element. Here, you can see that the Twenty Twenty theme uses the menu class â.primary-menuâ.
![Edit a Menu on WordPress: How to find menu class.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:724/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/find-menu-class.png)
![Edit a Menu on WordPress: How to find menu class.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:724/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/find-menu-class.png)
So youâll need to use this for all the CSS code that you write. Now, return to the Customizer and open the Additional CSS box.
If you want to increase the font size of your menu, use the following code: .primary-menu { font-size: 30px; }
Of course, youâll need to replace .primary-menu
with your themeâs menu class. If this doesnât work, your theme may be forcing a certain style. In which case, you can add the !important
tag to override the style:
![Change menu font with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:528/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/change-menu-font.png)
![Change menu font with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:528/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/change-menu-font.png)
Additionally, you can edit the background color of your menu using this code: .primary-menu { background-color: #add8e6; }
Then, replace the hex code to reflect your own preferences:
![Edit a Menu on WordPress: How to change menu background color.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:536/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/background-color-css.png)
![Edit a Menu on WordPress: How to change menu background color.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:536/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/background-color-css.png)
Another way to edit a menu on WordPress is to apply a hover effect. For example, you can change the font color when visitors hover over a menu item.
To do this, use the following code: .primary-menu li.menu-item a:hover { color: #040273; }
This way, the font turns indigo when you hover over a link:
![How to add hover effect to menu with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:496/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/hover-effect-menu.png)
![How to add hover effect to menu with CSS.](https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:2000/h:496/q:90/f:best/https://themeisle.com/blog/wp-content/uploads/2023/10/hover-effect-menu.png)
There are plenty of other ways to edit a menu on WordPress using CSS. For instance, you can change the opacity, borders, and padding.
Conclusion đ§
Although your menu design is determined by your theme, you can edit a menu on WordPress to match your branding or incorporate key pages and elements. This makes your site more unique, but it can also make it easier for visitors to navigate your content.
đ To recap, hereâs how to edit a menu on WordPress:
- Edit your menu in the WordPress dashboard. âď¸
- Edit your menu using the Full Site Editor (FSE).
- Edit your menu using a plugin like Max Mega Menu đ
- Use CSS to edit a menu on WordPress đ¨âđť
Do you have any questions about how to edit a WordPress menu? Let us know in the comments below!