This article covers advanced WordPress menu techniques including dropdown menus, custom CSS classes, and complex navigation structures.
Creating Multi-Level Dropdown Menus
- Go to your WordPress admin dashboard and click Appearance > Menus
- Select the menu you want to edit, or create a new menu first
- Add your main navigation items by selecting pages, posts, or custom links from the left panel
- To create a dropdown, drag a menu item slightly to the right underneath another item - you'll see it indent
- The indented item becomes a dropdown menu under the parent item
- You can create multiple levels by indenting items further right
- Click Save Menu when finished
Adding Custom CSS Classes to Menu Items
- In the menu editor, click Screen Options at the top right of the page
- Check the box for CSS Classes - this adds new options to your menu items
- Click on any menu item to expand its settings
- You'll now see a CSS Classes field where you can add custom classes
- Add your class name (without the dot) - for example: "highlight-menu" or "special-button"
- These classes let you style specific menu items differently using custom CSS
Creating Conditional Menu Items
- In the menu editor, click Screen Options and enable Link Target
- This allows menu items to open in new windows or tabs
- For each menu item, you can set whether it opens in the same window or a new one
- Use "Open link in a new tab" for external links or downloadable files
- Keep internal page links opening in the same window for better user experience
Setting Up Menu Locations
Most WordPress themes have multiple menu locations (header, footer, mobile, etc.):
- After creating your menu, go to Appearance > Menus
- Look for Menu Settings at the bottom of the menu editor
- Check the boxes for where you want this menu to appear
- Different themes have different location names like "Primary Menu", "Header Menu", or "Main Navigation"
- You can assign the same menu to multiple locations, or create different menus for different areas
- Save your changes
Managing Large Menu Structures
For sites with many pages:
- Group related pages under main category headings
- Limit main navigation to 7-8 top-level items for better usability
- Use descriptive menu labels that are shorter than your actual page titles
- Test your menu on mobile devices - long dropdown menus can be difficult to use on phones
- Consider creating a separate footer menu for less important pages like privacy policy and terms
If you're still stuck with advanced menu setup, contact Web60 support through your dashboard. Include a description of the menu structure you're trying to create and any error messages you're seeing.
FAQ
Q: How many levels deep can dropdown menus go?
A: Most WordPress themes support 2-3 levels of dropdown menus. Going deeper than 3 levels makes navigation confusing for visitors and can cause display problems on mobile devices.
Q: Can I add images or icons to my menu items?
A: This depends on your WordPress theme. Some themes support menu icons through their customizer settings. You can also add icons using custom CSS classes or consider switching to a theme that supports visual menu elements.
Q: Why don't my dropdown menus work on mobile?
A: Mobile menu display is controlled by your theme. Many themes automatically convert dropdown menus into collapsible mobile menus. Check your theme's mobile menu settings or contact support if mobile navigation isn't working properly.
Q: Can I have different menus for different pages?
A: Yes, but this requires your theme to support conditional menus or using a plugin. Most themes use the same menu across all pages, but you can create multiple menus and assign them to different menu locations.
Q: How do I remove the dropdown arrow from parent menu items?
A: This requires custom CSS targeting your theme's menu classes. The exact code depends on your theme, but typically involves hiding the arrow element using CSS display: none.
Q: Can I add a search box to my navigation menu?
A: Some themes allow adding a search box through the customizer. Alternatively, you can add a custom link menu item that links to your search page, though this won't provide a search box directly in the menu.
Q: Why do my menu changes not show up on my website?
A: Make sure you clicked "Save Menu" and assigned the menu to the correct theme location. If changes still don't appear, try clearing any caching plugins and check that you're editing the right menu.
Last updated: 1 March 2026