If you need to make the menu items unclickable (see Performance Partnership as an example of when / why this may be needed), you simply:
- go into Appearance > Menu and create Custom Links for each unclickable navigation item you require
- put a # in the URL field so it has no destination
- set the class as ‘unclickable’ (if you can’t see the option of adding a class, open the Screen Options menu in the top right hand corner and tick CCS Classes under Advanced Options).
- add these to the Menu and then drag them to the location you need them in the menu
- go to Appearance > Customise > Additional CSS and add
.unclickable > a:hover {
cursor: default;
}
It’s worth using this method for tablet and mobile navigation so the user can click anywhere on the menu item to open up the second-level options – not using this option will mean the usr has to click on the actual arrow in the navigation to do so.