Joomla: place menu items in different positions on mobile device

Question

I have developed a website based on Joomla 2.5 and I wish to make it mobile friendly, without changing (or changing as less as possible) the desktop version of my website.

So I have installed Joomla Mobile component. This component allows activating dynamically a different template (w.r.t the one that is used on desktop), when detecting a mobile device.

By default, the template that is activated when detecting a mobile is "Mobile_basic". This is a simple and really nice template, but the problem is that it doesn't support some menu positions, which are used by the desktop template. So the result is that some menu items are not displayed on mobile device.

I give an example for better clarification: my website uses a menu that is placed in "right" position. But the "Mobile_basic" template doesn't have this position. It has instead other positions called "mj_top", "mj_top2"...

The possible solutions could be:

1) Find a way to instruct Joomla to show a menu item in a different position, depending on the template which is used at that moment

2) Create new positions which are valid both desktop and mobile templates

Has anybody some better idea to solve my task?

Best regards Alberto

Answer 1

Maybe best solution will be use the same position in both templates [desktop and mobile] ?

at first i suggest to make a copy of mobile template - when you update your Joomla Mobile component it can overwrite your changes. here you can find easy way to do that https://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template

then edit index.php file in your mobile template

templates/My_mobile_basic/index.php

and insert this code in place you want to display menu

<?php if ($this->countModules('right')) : ?>
    <jdoc:include type="modules" name="right" style="none" /> 
<?php endif; ?>

Code above check is there are any modules with 'right' position, and display them

Also you need to change default template at Joomla Mobile configuration - so it will use your version

Answer 2

thank you for the smart hint. I have tested it an it allowed me to achieve my goal, but I had to abandon it because I found a bit difficult to control the order and the visualization of the objects in the mobile version.

Finally I opted for a solution that I would recommend to others who have my same need. With the menu manager I have created "clones" of the menus that are visible only in the desktop template, using positions that are valid only for the mobile template. Then I have populated these cloned menus with a copy of the items that are in the desktop menus.

In this way I can control the order and the visualization of the menu items in the mobile version, easily and independently from the desktop version.