I often come across questions from beginning WP developers asking how to create menu items which do not link to a physical page. That is, hovering over the menu item should expand the sub-menu, but clicking on the main menu item should not cause anything to happen, only the sub-menu items should link to another page. The way to do this is to create a custom menu item that links to #. The instructions below assumes that you’ve already created a custom menu.
- From the admin dashboard, go to Appearance → Menus.
- Look for a section on the left labeled Custom Links. If you do not see such a section, click the Screen Options tab in the upper right corner of the screen, then check the box labeled Custom Links and the Custom Links section should then show up on the left.
- Expand the Custom Links section. For URL, enter # (a pound sign, also known as a hashtag). For Link Text, enter the text that you want displayed for that main menu item. Click the Add to Menu button.
- You should now see the new menu item on the right side, at the bottom of the Menu Structure section. Drag it up to the position where you want to see it in the navigation bar.
- Create and/or drag any submenu items below this new menu item.
- If you are replacing an existing menu item, remove that old menu item by expanding it and clicking the Remove link.
- Click the Save Menu button.
Now nothing should happen if your users click on that main menu item. However, sub-menu items are still accessible and clickable.