Add class and extra HTML to specific menu items with hook In page.tpl.php I have the following to echo out the main menu:

&lt;?php if ($main_menu): ?&gt;
        &lt;?php print theme('links__system_main_menu', array('links' =&gt; $main_menu, 'attributes' =&gt; array('id' =&gt; 'top', 'class' =&gt; array('links')))); ?&gt;
&lt;?php endif; ?&gt;


The site is responsive so on desktop monitors it displays like this:



But as you reduce the screen to mobile size it turns into a navigation list that can be opened and closed with a button. See here:



However the desired effect is to have small descriptions for each of the menu items in the mobile version simply by using &lt;p class="monly"&gt;little description&lt;/p&gt; wrapped within the menu li and a tags. See here:



I also want to add CSS class 'nobile' to tthe list item 'Home' in the menu so that it doesn't display on the mobile version.

So how can I add this CSS class to the 'Home' &lt;li&gt;? And how do I go about adding the link descriptions to each &lt;li&gt;? Can I use a hook in template.php? If so how do I go about this?

Thanks for your help!
You can add a custom class to menu items by using the Menu Attributes module. You can also use hook_menu_link for the same. For displaying the menu description, here is a sample code. Paste it in your template.php file

/**
* Implements theme_menu_link().
* Adds menu description under main menu 
*/
function themename_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $element['#localized_options']['html'] = TRUE;


  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  if ($element['#original_link']['menu_name'] == "main-menu" &amp;&amp; isset($element['#localized_options']['attributes']['title'])){
    $element['#title'] .= '&lt;span class="description"&gt;' . $element['#localized_options']['attributes']['title'] . '&lt;/span&gt;';
  }

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '&lt;li' . drupal_attributes($element['#attributes']) . '&gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
}


Note : You've to use css/js to show/hide the menu description based on the screen size.