In page.tpl.php I have the following to echo out the main menu:

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

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

enter image description here

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:

enter image description here

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

enter image description 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' <li>? And how do I go about adding the link descriptions to each <li>? Can I use a hook in template.php? If so how do I go about this?

Thanks for your help!

1 Answer 1


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" && isset($element['#localized_options']['attributes']['title'])){
    $element['#title'] .= '<span class="description">' . $element['#localized_options']['attributes']['title'] . '</span>';

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

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

  • Thanks for your help @Sharan! any chance of adding comments to this function? Added it, and doesn't seem to have changed anything. But hard for me to debug because I don't really understand what is happening :P :S Oct 1, 2012 at 14:16
  • I'll try to add few comments in the function...
    – Sharan
    Oct 1, 2012 at 14:28
  • Hey @Sharan I can't seem to get this working and displaying the description when I put it in template.php :S Have you tested it yourself? Oct 17, 2012 at 13:08
  • Ya I tested it on my site... Did you replace theme_menu_link with your theme name ? Anyways I updated the code above to account for any typo... Check now and tell me the result...
    – Sharan
    Oct 17, 2012 at 17:08
  • Yes set the theme name @Sharan. Could it be because I'm printing the menu like this <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'top', 'class' => array('links')))); ?> ? Oct 17, 2012 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.