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): ?>
    <?php print $main_menu_links; ?>
<?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?

1 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; }
  • This exactly what I'd do but with one exception. I would REALLY refrain from using !important. It adds a level of specificity to your stylesheets that can't be overridden by anything other than another !important.
    – Chapabu
    Oct 10, 2012 at 15:07
  • That said, I don't even target CSS IDs in my stylesheets - I tend to use classes for everything.
    – Chapabu
    Oct 10, 2012 at 15:08
  • I don't just want to uppercase the text - that was just an example - I also want to add some markup Oct 10, 2012 at 15:10
  • :) You never said originally you wanted to add some markup, just change the text. See another one of my answers here -- you can literally change the menu however you want. drupal.stackexchange.com/a/35871/3279
    – tenken
    Oct 10, 2012 at 20:34
  • Ah ok cool, I'll check that out and come back - it looks like what I'm after :) Oct 10, 2012 at 23:32

Your Answer

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

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