Add menu headings to Wordpress sub menus

Question

I'm using the native Wordpress menu. I have two top-level links with sub menus - I'd like for those sub menus to display the name of the parent menu item. So if I have a parent menu item named "Gardens" containing a sub menu of "Flowers" and "Plants", that sub menu should say "Gardens" at the top, and then list the sub menu links below it.

I've gotten as far as creating a walker to insert some H3 heading text in the sub menu. It looks like this:

class Subnav_Header_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $heading = 'Heading Text Here';
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'><h3>" . $heading . "</h3>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

It's not great, but it's working. Now I just need some code to get the name of the parent menu item. Can anyone help me with this?

Thanks!

Answer 1

I ended up removing that code from my functions.php file and used jQuery instead. Here's how I took care of it, if anyone wants to know:

    $('.menu-item-has-children > a').each(function(){
        var submenuHeading = $(this).text();
        $('.sub-menu', ($(this).parent('.menu-item-has-children'))).prepend('<h3>' + submenuHeading + '</h3>');
    });

Answer 2

You could also use the predefined classes that Wordpress provide to recreate h3, probably a bit cleaner.

.menu-item-has-children {
    font-size: 1.7em;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 0 0.4em 0;
}

https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes