• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

2 Ways To Add a Description Below Each Nav Menu Item

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

Reader Interactions

Comments

  1. kristinskj says

    September 8, 2015 at 5:37 pm

    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.

    Log in to Reply
    • Brad Dalton says

      September 10, 2015 at 10:34 pm

      Hi Kristin

      Which code snippet did you use exactly?

      Log in to Reply
      • kristinskj says

        September 11, 2015 at 5:20 am

        I used this one:

        function add_description_nav_menu( $item_output, $item ) {
         $description = $item->post_content;
         if (' ' !== $description ) 
         return preg_replace( '/(<a>[^&lt;]*?)&lt;/&#039;, &#039;$1&#039; . &#039;' . $description . 'theme_location &amp;&amp; $item-&gt;description ) {
                $item_output = str_replace( $args-&gt;link_after . '</a>', '' . $item-&gt;description . '' . $args-&gt;link_after . '</a>', $item_output );
            }
        
            return $item_output;
        }
        Log in to Reply
        • Brad Dalton says

          September 14, 2015 at 9:58 am

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

          Log in to Reply
          • kristinskj says

            September 14, 2015 at 10:38 am

            I found a solution in the Dynamik forum, this code works:

            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-&gt;theme_location &amp;&amp; $item-&gt;description ) {
                    $item_output = str_replace( $args-&gt;link_after . '</a>', '' . $item-&gt;description . '' . $args-&gt;link_after . '</a>', $item_output );
                }

            return $item_output;
            }

          • Brad Dalton says

            September 14, 2015 at 10:41 am

            Awesome. I owe you one!

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.