WP SITES

Log in

2 Ways To Add a Description Below Each Nav Menu Item

—

by

Brad Dalton

The code in this tutorial enables you to add a description which is displayed under each nav menu item.

menu-description

Go to Appearance > Menus and select the menu you want to add descriptions to.

On the top right hand corner you’ll find screen options which you need to open.

Menu Screen Options

Check the Descriptions box then open each menu item where you can add some text.

Add Menu Description

Here’s the PHP & CSS for logged in members which are both needed to make both these solutions work:

Register for full access

Comments

6 responses to “2 Ways To Add a Description Below Each Nav Menu Item”

  1. kristinskj Avatar
    kristinskj

    Hi Brad, I have used this method to add menu descriptions to my site https://wpskolen.no. After upgrading to Genesis 2.2 the descriptions suddenly appear abowe the menu items, instead of below. I thought I might solve the problem temporarily by downgrading Genesis to the previous version, but it didn’t change anything. I guess something is changed in the database, but I have no idea where to look.

    Here’s a screenshot: https://www.dropbox.com/s/vfqy31ip6bpmupz/Skjermbilde%202015-09-09%2002.34.58.jpg?dl=0

    Any idea what caused this?
    BR,
    Kristin Skj.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Kristin

      Which code snippet did you use exactly?

      1. kristinskj Avatar
        kristinskj

        I used this one:
        [code]
        function add_description_nav_menu( $item_output, $item ) {
        $description = $item->post_content;
        if (‘ ‘ !== $description )
        return preg_replace( ‘/([^<]*?)</', '$1' . '’ . $description . ‘theme_location && $item->description ) {
        $item_output = str_replace( $args->link_after . ‘        ‘, ” . $item->description . ” . $args->link_after . ‘‘, $item_output );
        }

        return $item_output;
        }
        [/code]

        1. Brad Dalton Avatar
          Brad Dalton

          Sorry for the delay. Still trying to work out a solution for this.

          1. kristinskj Avatar
            kristinskj

            I found a solution in the Dynamik forum, this code works:
            [code]
            add_filter( ‘walker_nav_menu_start_el’, ‘add_description_nav_menu’, 10, 4 );
            function add_description_nav_menu( $item_output, $item, $depth, $args ) {
            if ( ” == $args->theme_location && $item->description ) {
            $item_output = str_replace( $args->link_after . ‘‘, ” . $item->description . ” . $args->link_after . ‘‘, $item_output );
            }
            [/code]
            return $item_output;
            }

          2. Brad Dalton Avatar
            Brad Dalton

            Awesome. I owe you one!

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.