Different menu for tablets and mobiles?

I want to have two different menus. One that show when visiting from a computer, and one when visiting from tablets or mobiles. Right now the Main Menu is showing at all devices. How do I make this work?

I tried to use suffixes ".nomobile .notablets" on the Main Menu and ".onlymobile .onlytablets" on the Other Menu. But that didn't work.

Hi,
right now using default settings you can not
But there is a solution. It might be "stupid" simple but works.

1) Use one menu for all items - add mobile and desktop ones.
2) Using CSS hide selected items in deskop view
and
Show others only in mobile view.
I think you should use
@media only screen and (max-width: 580px) { .... } - read more about this CSS3 features.
Check also this file: gk_game\css\mobile.css

Hi,
right now using default settings you can not
But there is a solution. It might be "stupid" simple but works.

1) Use one menu for all items - add mobile and desktop ones.
2) Using CSS hide selected items in deskop view
and
Show others only in mobile view.
I think you should use
@media only screen and (max-width: 580px) { .... } - read more about this CSS3 features.
Check also this file: gk_game\css\mobile.css

I have tried this. But the items I hide with css is still visible in mobile and tablets.

I use this code to hide one of the menu items in all devices except for desktop:

Code: Select all

@media only screen and (max-width: 1000px)  { #menu128 { display:none; } }

But when I visit from a smartphone I can still see the menu item with id menu128. And when I use firebug in Firefox I see the display:none; but the menu item is still visible anyway.

Upsss...exactly I forgot that mobile menu don't have any ID for menu items.

mm.png

So you have to modify: templates\gk_game\layouts\default.php
and add new module position in place where mobile menu is loaded

<select onChange.....
</select>

in this position I suggest to publish menu (module) which have mobile features.

Hi Pawel,

I am using gk_simplicity on J2.5. I did chnges in default.php to show mobilemenu just on mobile devices. But it is stil on ipad, and smartphones. In mobilemenu "Portfolio" must not be visible, bcs it is not responsive. Can you please help me

http://www.viro-its.hr

Regards
Berti





<div class="gkPage" id="gkHeaderNav">
<?php $this->layout->loadBlock('logo'); ?>

<?php if($this->API->get('show_menu', 1)) : ?>
<div id="gkMainMenu">
<?php
$this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
$this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
?>
</div>
<?php endif; ?>

<?php if($this->API->get('show_menu', 1)) : ?>
<div id="gkMobileMenu">
<?php echo JText::_('TPL_GK_LANG_MOBILE_MENU'); ?>
<select onChange="window.location.href=this.value;">
<?php
$this->mobilemenu->loadMenu($this->API->get('menu_name','mobilemenu'));
$this->mobilemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
?>
</select>
</div>
<?php endif; ?>
</div>