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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: