The BlogAll my latest web posts & rants

Data Label on WordPress Navigation

  • Tutorials
  • 0:57 reading time (ish)
  • 183words

Hey guys, I thought this might be of interest – nothing more than a code dump. If you have any questions or suggestions please leave a comment below!

This code snippet allows you to add data-labels to your WordPress (wp_nav_menu) navigation items. Why would you want to do this? In my particular case, I’m using it as a ‘hover state’  for a client build – When the user hovers over a menu item, the data-label scrolls in as the menu item scrolls out creating a nice little effect.

Just a heads up, this code was made on a random ‘light bulb’ moment so the code could do with some cleaning up! (I’ll get round to it eventually ;-))

HTML:

CSS:

Add the following into your functions.php

Add this into your header.php

Next, just add a ‘Description’ to each Menu Item via the Appearance > Menu admin page (if you can’t see the option, look top-right, toggle ‘Screen options’ and check ‘Description’).

Voila!

Thoughts? Comments?