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:
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 <p class="monly">little description</p>
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' <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!