When designing a website with the Divi theme in WordPress, you might encounter a situation where you want to create a menu item that doesn’t act as a clickable link, but instead, it should expand a submenu.
However, by default, WordPress requires you to provide a URL for menu items, even if you don’t want them to be actual links. This can lead to a confusing user experience. In this tutorial, we’ll show you how to remove the mouse pointer on hover for menu items with submenus in Divi, giving your website a cleaner and more user-friendly navigation.
Join +3 610 subscribers!
Disabling the Mouse Pointer on Hover For Menu Items with Submenu in Divi, Step by Step
- Log in to your WordPress dashboard.
- Navigate to Appearance » Menus
- Select the menu where you want to create a menu item without a clickable link
- Choose Custom Links on the left side to create a new menu item that doesn’t function as a link.
- In the URL field, you’ll notice that WordPress requires a valid URL. To bypass this, you can add a hash symbol (#).
- Add your Link Text, for example “About Us”
- Click the Add to Menu button
- Now click the small arrow icon ▼ on the right side of the Custom Link to edit it
- Remove the hash symbol (#) in the URL field (yes, this is suddenly possible)
- Save your settings by clicking the Save Menu button.
Now you have removed the link completely and the mouse pointer will not be displayed when hovering the Custom Link menu item.
Adding submenu items to your Custom Link
Let’s do the final touch.
- Drag and drop the newly added Custom Link menu item to the desired position in your menu structure.
- Drag and drop the desired submenu link(s) on top of the custom link. The submenu links should have a small indent.
Don’t forget to save your menu configuration by clicking the Save Menu button.
Preview in frontend and make sure to clear your cache if you can’t see the changes. When you hover over the newly added Custom Link menu item, you’ll notice that the mouse pointer no longer appears, and the menu item is not clickable because it doesn’t contain any link.
By following these steps, you can create menu items with submenus in Divi that do not display a mouse pointer on hover, making it clear to your website visitors that these items are not clickable links. This simple tweak can help improve the user experience and make your website’s navigation more intuitive. Enjoy designing your user-friendly Divi menu!
That’s all for today!
👉 Related post: Six Tips for Better Mobile Menus In Divi
👉 Related post: Create Advanced Mobile Menus In Divi
👉 Free course: Create a website from scratch with Divi