1

BACKGROUND

I’m unable to style the current active menu item in Joomla 2.5. After much research and stuffing around it turns out that my problem is due to the fact that I am using a menu item type of “menu item alias”.

The example below illustrates my problem.

Let’s say I have a menu item called “tutorials” when I click on it and go to that page, I want the tutorials menu item to be styled differently so that the user knows that they are on the tutorials page. Unfortunately, there is no “current” class attached to the menu,so this makes it difficult (impossible?) to style the menu item that matches the current page.

QUESTIONS

  1. How can I style the current Joomla menu item when using menu item alias as the menu item type in Joomla 2.5?
  2. If I can't style it, is there a workaround? Either a hack or an alternative to menu item alias? Keep in mind that I don’t want to create duplicate content.

UPDATE1

A class of active is added to the current menu. Here is an example of what I am seeing when I click on the uppermost menu item.

CSS classes for uppermost menu item which is the current page

The problem with that is that all the submenu items are also styled. How do you prevent that?? Here is the CSS of a submenu that is a child of the current menu item (note that the current page is for the uppermost menu item).

CSS for submenu item which is a child of the uppermost current menu item

UPDATE2

I've taken the answers on board and played around with the CSS some more. It turns out I was wrongly applying the CSS styling. I should have used li.active to style the menu item that matches the current page.

Improve this question

2 Answers 2

Reset to default
1

Answer 1: Is there an active status on the alias link at all? There should be - Because you can use that in place of current for that particular case. In fact I typically add .active to all my .current styles to catch those types of links.

Answer 2: As for a hack around, here's an option:

Add a body id for your page.

This goes above the doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

And this replaces 

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Then on your actual Tutorial menu item (the non-alias) - add a page class. Now when you go to the tutorial page, a body id will show up for your page. Now, grab your alias li item class and style its appearance to match the current styling when inside that body id.

Improve this answer
2

The default menu module in Joomla 2.5 append the active class to the active menu items, event to the alias menu item type.

It is possible that your template contains already a template override for the menu module, giving to your module a different behavior.

In any case, it is very easy to modify the output of the menu module with your override and add the classes you want to it.

Improve this answer

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.