OxygenBuilder.com Nav Menu

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.

Live Demo

The Process

1. Set up a menu with descriptions for the menu items.
2. Show the descriptions using walker_nav_menu_start_el WordPress filter hook.
3. Use nav_menu_css_class filter to 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).
4. Add the icons as backgrounds and other custom CSS.

Step 1

At Appearance > Menus, create/edit a menu.

Here's the export file (mirror) from my demo site if you want a head start. To import, go to Tools > Import > WordPress.

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.

Step 2

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

Code: