1

I am using the Omega HTML5 base theme and am attempting to add a '/' delimiter between main_menu items on my site.

I have searched high and low and the closest I've come is the following:

function MYTHEME_menu_link(array $variables) {
$delimiter = '';
  // Only add delimiter to the main menu
  if (strpos($variables['element']['#theme'], 'main_menu') !== FALSE ) {
    // Only add delimiter if item is not the last one
    if (!in_array('last', $variables['element']['#attributes']['class'])) {
      $delimiter = '<span class="delimiter">/</span>';
    }
  }
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  // Add delimiter just before the closing </li> tag
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . $delimiter. "</li>\n";
}

This actually works on any another template (just not OMEGA). Irrespective does anyone have an approach to adding this forward slash on main-menu items?

Thanks!

1

I would suggest a purely CSS approach to this. There is really no need to go through the trouble of adding a function to your theme for this change.

The following CSS code would get you (at least close to) the results you desire:

  ul.main-menu li:after {
    content: "/";
  }
  ul.main-menu li.last:after {
    content:"";
  }

The :after pseudo-class's support includes all browsers except IE 7 & below and Firefox 3.0 and lower.

3
  • Completely forgot about using :after as an approach - (have been looking at this for way too long...). Thanks for putting me straight on this! – dwarren Apr 26 '12 at 21:05
  • oh yeah, and then don't forget to unset that style for the last li! Edited my answer to show that :) – sheena_d Apr 26 '12 at 21:14
  • Actually it'd be ul.main-menu li.last-child:after {} (or first-child if you wish to change the beginning) – user11328 Nov 11 '12 at 8:59
0

For those using Sass, I have written a mixin for this purpose:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Example:

@include addSeparator('li', '|', 1em);

Which will give you this:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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