Joomla home page menu item doesn't get the "active" class

Question

I have googled a lot about my problem and I didn't find a solution. I'm creating a website using Joomla that supports English and Dutch languages. I followed online tutorials and I created 2 menus (separate from my main menu) that contain only the Home menu item which is set to default page for the language ( 1 for Dutch and 1 for English). The problem is when I'm at my homepage ( index.php/en or index.php/nl) the Home menu item doesnt get the "active" class so it is not highlighted. I could use JS to invent a hacky way to highlight it but I am sure that I am doing something wrong and there should be a better way to fix my problem. How should I set up my menus so it works as intended?

Answer 1

If you are using the latest Joomla (3.8.2 at the time of writing) (I'm not going to check each 3.x Joomla-version explicitly) and are using the core module mod_menu you should get an active CSS class added to the parent element (li) of your hyperlink when using an unchanged mod_menu module.

See lines 36 to 39 and lines 44 to 47 of modules/mod_menu/tmpl/default.php:

https://github.com/joomla/joomla-cms/blob/3.8.2/modules/mod_menu/tmpl/default.php

Though it is possible the template for your core mod_menu module is being changed by means of a (custom) template or a layout override.

If you were to be using some third party or custom template called yourcustomtemplate, it could be you will find an override for modules/mod_menu/tmpl/default.php inside templates/yourcustomtemplate/html/mod_menu/default.php.

Also, one could check the Create Overrides tab of the Template Manager:

https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager/en#Creating_Overrides

Note that it is not the hyperlink itself which should get the active CSS class assigned, but instead, it would be the parent element (the list-item element li).