Custom Mobile Menu in Drupal 7 can't access child links

Question

My company took over the maintenance of a website and I am trying to determine how to properly get both the top-level (parent) links as well as the child links. The code that was being used is:

 <div id="monav">
<ul>
  <?php
$mobile_menu = menu_navigation_links('menu-mobile-nav');
print theme('links__menu_mobile_nav', array('links' => $mobile_menu));

  ?>
  </ul>

This only spits out the top-level. I have been digging through forums and code trying to find the correct way to get the child links. Can you point me in the right direction oh wise Drupal gurus?

Note: setting the parent link to "Show as expanded" does not work.

Answer 1

I ended up using this code:

In template.php I have

//Render Mobile
function drive_menu_tree__menu_mobile_nav($variables){
    return '<ul class="" id="">' . $variables['tree'] . '</ul>';
}


function drive_menu_links__menu_mobile_nav($variables) {
    $element = $variables['element'];
    $sub_menu = '';

    if ($element['#below']) {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);
    return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Then I display the menu in page.tpl.php using:

print drupal_render(menu_tree_output(menu_tree_all_data('menu-mobile-nav')));

SOURCE: How to display a menu in a template file?

Answer 2

Update:

The above code was spitting out an error so instead I am doing this.

template.php in the theme_preprocess_page(&$vars) function

//Render main menu 
$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
$vars['main_menu'] =  $main_menu_tree;

Then I am displaying the menu in page.tpl.php using

  <div id="monav">
  <?php
        print render($main_menu);
    ?>
</div>

To make this menu mobile I added the following jquery

(function ($) {

$(document).ready(function(){
//Mobile Navigation
$('#nav-toggle').click(function(e) {
  $('#monav').toggle();
});
$('#monav li.expanded > a').attr("href", "#");
 $("#monav li.expanded").click(function() {

  $(this).find('.menu').toggle();

   });
 });

})(jQuery);

Note I had to hide this in my css

#monav ul.menu li.expanded .menu{
display:none;
}