Mobile menu doesn't work

When I view storebox on a mobile phone and the main menu gets transformed so it's an icon in the top right corner you have to click on. When that happens the menu stops to work.

It thinks it's always on the frontpage, so when I'm on a subpage and want to click on "Home" to get back to the frontpage I can't click it since the menu thinks I'm already on the frontpage.

I tested it on WP8 and Android and it's the same thing.

You can try it out here: http://www.ffatest.se/shop

Here's a screenshot of how it looks on my phone when I'm on a subpage, as you can see "Hem = Home" is marked as the active page, but I'm not on the frontpage I'm on a subpage.

https://skydrive.live.com/redir?resid=1 ... _X-_ApmkHA

Hi

Where is this menu exactly ? The main menu looks fine when I open it with iPhone.

Yes it's the main menu, the one with the three stripes.

But you have to go to a subpage and then try to go back to the frontpage using the menu. If you try to do that you'll see that it won't work to go back to the frontpage.

Hi

Ok. I can see that home element is always selected as active. Is this the problem You have mentioned ? Please send ma an access to joomla panel so I'll check menu structure.

Yes that is the problem.

I have emailed you admin access.

Hi

Menu structure looks fine, but investigating the problem I've noticed that each menu element is populated with some extra code "onmouseover=""", which should not be there. Unfortunately I cannot find which extension is adding this. But it may be the problem this is not working as supposed to.

I haven't added that and I don't know about anything other than the template that would add something like that.

Hi

Ok. You're right. Demo has the same code under menu elements. Anyway I've just noticed that this site is a kind of subpage. So I was probably looking at wrong menu.

I can see it now. You are using a menu which is basicaly made from aliases. This will not work as a standard menu. You need to use elements with some specified type. This is still a main menu, so needs to be treated specialy.

Isn't it possible to make it work with a menu with aliases?

Because it's much more flexibel to have one menu that builds all the links and then another menu that is shown on the webpage which is only responsible for the visual presentation of the menu.

With that system I can change how the menu looks on the webpage without changing the links and I can also only change the links without changing how the menu looks on the webpage.

Hi

Unfortunately not. This is how joomla works. Without a standard menu with Itemid there is no way for joomla to know what page You've currently on so it's working as You have it now than. But You can use the same menu You have already for this second template. It should be even better for You.

But the menu works fine when you view the site on the desktop.

The only problem really is that the "Home" menu item when you view it on a phone isn't a real link, if it is possible to make it a real link on the desktop shouldn't it be possible to do the same thing for mobile?

I don't need it to show which menu item that is active right now, I just need the links it work.

Hi

Acctualy menu doesn't work well on desktop. A selected element cannot be recognized so none of the element is set to active. Without active there is no way to get back to Your previously used template.

Mobile is mobile friendly select menu system. Which without an active element is choosing first on the list as active. But as it's with select elements there is no way to choose the element already selected. This is why You cannot go to home page. But issue is not with the code of the menu but with configuration.

But if I don't use a menu with aliases I can't get the link to look like this:

http://www.domain.se/shop/products

It will instead look like this:

http://www.domain.se/prodcuts

I saw that in the template options there is an option for "End item level". If there was an option for "Start item level" then it would solve my problem. Because I could set it to 2 and the first level of the menu would be hidden, the level that is responsible for "shop" in the link.

Hi

Ok. I'm completely lost now So You need a different menu for this shop template, but You cannot use this different menu .

This is a really complicated thing. I have not seen such solution before so noone has thought about making it possible. I would make it this way:

- disable template menu
- add a new position to template
- use mod_menu to show mainmenu but restrict it as You need it
- style it to look like the old menu

A little bit complicated, but I think this is the only option.

Hi

Wait. Have You tried using external url except for alias type ? I'm not sure if this wll work, but it's worth trying.

In Joomla the menu creates the links on the site, so the way I build my menu that is the way the links on the site will look like.

And I want all the links on this subpage of the site to start with "shop" ex. http://www.mydomain.se/shop

But if I do a menu on the site which does this then it wouldn't look good, it would be only one menu option in the menu with a lot of submenu options. As you can see here: http://www.ffatest.se/shop

If I could in the template settings tell the template to start showing the menu at level 2, not showing level 1 of the menu then the links would look good and the menu on the site would look good.

Hi

Unfortunately You cannot do that with mainmenu, but using a new module positionand mod_menu in it's place will make it work like that exactly.

I know it's not the easiest solution to this problem, but it the first thing which pops in my head if I think about it.

So you can replace the template menu with a menu module?

Hi

That was my idea, but when I oppened the file /layouts/default.php I've noticed that there is an option "startlevel" . Honestly I do not know what is it, but it's worth trying to be set to 1 for tests

orginal code is:

Code: Select all

                <?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','mainmenu'));
                       $this->mobilemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                   ?>
                   </select>
                </div>
                <?php endif; ?>
             
                <?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; ?>


try change it to:

Code: Select all

                <?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','mainmenu'));
                       $this->mobilemenu->genMenu(1, $this->API->get('endlevel',-1));
                   ?>
                   </select>
                </div>
                <?php endif; ?>
             
                <?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(1, $this->API->get('endlevel',-1));
                   ?>   
                </div>
                <?php endif; ?>


I hope it will work

I will try the code but I thought I try with a module first. But in which position should I put the menu module?

I see the positions menu1-10 and topmenu, no mainmenu position.

Hi

The problem with module is that there is no menu module position for it. You need to create it first.

Edit file /layouts/default.php and replace this code:

Code: Select all

                   <?php
                      $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                       $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                   ?>   


to

Code: Select all

<jdoc:include type="modules" name="mainmenu" />


This way You will be able to use module position called "mainmenu".

Both code suggestions work. I've applied the first one here:

http://www.ffatest.se/shop

But the styling seems to get messed up with both solutions, any idea how to fix the styling?

Hi

Names of the html elements are different in module, so style is not correct. There is no other way than to create this style once more. You have all clases in template, but need to change selectors to match new code. Unfortunately this is considered as customization and we do not support that, so I cannot tell You exactly.