Editing a Drupal 7 sub-themes menu HTML

Question

I have a subtheme based off the Zurb Foundation Drupal Theme. The Zurb foundation theme defines the main navigation menus in it's template.php like so:

function zurb_foundation_preprocess_page(&$variables) {
    ...          
    $variables['main_menu_links'] = '';
    if (isset($variables['main_menu'])) {
        $variables['main_menu_links'] = theme('links__system_main_menu', array(
            'links' => $variables['main_menu'],
            'attributes' => array(
                'id' => 'main-menu',
                'class' => array('nav-bar'),
            ),
            'heading' => array(
                'text' => t('Main menu'),
                'level' => 'h2',
                'class' => array('element-invisible'),
            ),
        ));
   }
   ...
}

and in page.tpl.php:

<?php if ($main_menu_links): ?>
    <nav>
    <?php print $main_menu_links; ?>
</nav>
<?php endif; ?>

which works fine. I want to edit the HTML being generated (convert the links to uppercase to be precise).

I create a template.php in my sub template and add to it:

function mycustomtheme_menu_link(array $variables) {
    $element = $variables['element'];
    $sub_menu = '';
    if ($element['#below']) {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = drupal_strtoupper(l($element['#title'], $element['#href'], $element['#localized_options']));
    return '<li data="test-custom-menu" ' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

But this doesn't have any effect; the normal menu is generated with out my text value attribute. The docs says that the theme function (used by the Zurb theme):

Generates themed output. All requests for themed output must go through this function. It examines the request and routes it to the appropriate theme function or template

so I would have thought that it would have detected the current theme (my subtheme) and called the appropriate hook caketoppercompany_menu_link when rendering the links, but this doesn't seem to be the case. Any suggestions?

Answer 1

You just want to make the links show as uppsercase text!? Since you're not altering the HTML structure of the menu -- there is no need to modify any theme function. You just do it using CSS.

/* In ideally your last css file listed in your .info file
 * add a line such as
 */
#main-menu a { text-transformation: uppercase !important; }