This members-only tutorial provides the steps to recreate the recently designed Oxygen's website nav menu especially the "Product Tour" dropdown using a standard WordPress menu rather than designing the dropdown plus hiding and showing it on hover per this video.
- Set up a menu with descriptions for the menu items.
- Show the descriptions using
filterto automatically add item labels as classes for the menu items (this step is optional as we can manually add classes when editing the menu but that could become laborious).
- Add the icons as backgrounds and other custom CSS.
At Appearance > Menus, create/edit a menu.
Click on Screen Options from top right and tick the visibility of Description.
Add description text for the menu items that should have some small explanatory or feature text.
Let's show the descriptions for the menu items in nav menus.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Show Navigation Menu Item Descriptions
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.