Portfolio collapsed menu

Hello,

I'm a paid up member but I am using Portfolio because I like a lot of the features. I spent a long time styling the site and now find that the menus don't work properly in the collapsed site. In fact the same thing applies to the Portfolio quick start site itself.

There are two problems. The first shows when the site is at mobile width and the page has the portfolio items displayed and the "hamburger" menu button. When the button is pressed, on 50% of the tries, the menu opens under the portfolio items or tiles. How can this be fixed?

The second is that when the screen is narrower than full width but not at mobile phone width, such as with a table, iPad mini etc. the standard full width menu shows but the submenus don't show. I think this shows with the portfolio site too. How can this be fixed?

It's a great template and will be first class when these things are working well.

BR

JC

Hello,

I have fixed the menu opening under portfolio items using the fix in post 150 (I think):


/* Fixes messed up menus */

.navigation.opened .nav {
height: auto !important;
}

However the problem with submenus not opening on touch screens still remains. That's to say, when you touch or hover over the parent item, nothing happens. You never see any of the child items on a touch screen. I would settle for the hamburger menu on all touch devices now it works correctly but I cannot see a way to make sure this happens with the CSS files.

There's some stuff in the template.js file which suggests there has been some work on this but it's commented out:

// Fix for the mobile devices
/*if($(document.body).hasClass('touch-screen')) {
>>>>

Uncommenting this does not seem to fix the problem.

Any ideas gratefully received! I have a website all ready to run but not if mobile devices don't work… which was the entire reason for going to J3!

JC

Hi

Please send me Your site's url and an access to FTP. I'll try to fix it.

Hello,

Actually, you don't need to look at anything I have done. All the limitations show up on your own demo site.

Go to the Portfolio demo site using a computer and it works fine.

Go there on a tablet or large iPhone and the menus don't work.

Go there on a smaller iPhone and the menus collapse into the hamburger menu and work fine.

Honestly, I would be quite happy to have the hamburger menu on any touch device but can't work out how or when the switch is made. Does anyone have a clue about this?

I know the template is free, but it does not make Gavick look so good that it does not work properly.

JC

Hi

Can You please add screenshots of this problem ? I've checked it on our demo and iPhone 6plus and I do not see any problems with menu. I'm probably looking at something else.

Hello,

You need to try the normal menu on a medium size touch screen device. The menus work OK on a computer and OK on a small phone. They fail on all the medium size touch devices I have tried… iPad, iPhone etc when in wide mode with normal menus.

The hamburger menu works on a narrow screen but when you rotate the device to a wide screen mode, and the menu flips to the normal menu, it fails. Your screen shots appear to show only a narrow phone and a computer so you will not see the problem.

When you hold your finger or tap on a normal menu on a touchscreen device, nothing happens. There is no drop down menu. If you tap a menu heading, or hold your finger over it, then you should get a submenu or dropdown menu but you don't. There is no way to access the submenus on the Portfolio demo site on a touch device with normal menus.

http://www.keepitsoaring.com/lksc3/images/IMG_2128.PNG

It's really difficult to send a screen show because nothing happens! I have a screen shot but all it shows is that if you touch a menu item, you are sent to the link.

As I said earlier, I would be happy to use the hamburger menu on ALL touch screens but I cannot see a way to make this happen. Perhaps you could help with this?

BR

JC

Hello,

Is anything happening out there?

Let me try and explain the problem another way. If you have a touchscreen device with a wide enough screen (e.g. iPhone 6 plus horizontal or landscape) so the wide view Portfolio menus are visible… same as you would see on a computer, if you touch a main menu header, nothing drops down. You don't see the submenus. No child menus drop down.

Instead, when you touch the parent menu, the page linked to the parent menu opens.

Therefore there's no way of accessing or opening any submenu with a widescreen touchscreen device… iPad, tablet, landscape phone etc.

Only if you use a narrow phone or a phone in portrait mode does the "hamburger" menu appear. Touch this and the submenus appear.

So currently, your Portfolio template is not usable with a tablet of any sort unless you only have 4 or 5 parent menus and no submenus.

Yes, Portfolio is free, but as I said before, I am a paid member! Unless I am really missing something, it's a poor reflection on the quality of both Gavick templates and Gavick support of their own products!

JC

Hi

I honestly cannot recreate Your problem. Both my screens were taken with iPhone6+ and You can see there that submenus are visible instantly, there is no need to click anywhere. Also we do not have any option triggered with handling or double-tap. Script is pretty simple, when You touch link once it checked if there are submenus or not, if submenus are recognised it will open it, if script will not find it or see it open already will follow the link.

I have exactly same behaviour with iPad 2.

Are You looking directly on the site: https://demo.gavick.com/joomla3/portfolio/ or from just https://demo.gavick.com, maybe the iFrame presentation system is messing something for You.

>>Are You looking directly on the site: https://demo.gavick.com/joomla3/portfolio/ or from just https://demo.gavick.com

Neither of these show URLs show any drop down menus on an iPad 2 running safari at my end. It's the first time trying on that iPad so it has no cache or history of trying either.

I obviously can't send a screen shot of this. I can't see any screen shot of drop down menus on the landscape view screenshot you posted from an iPhone 6+ either.

As a get-out, how is it possible to show only the hamburger menu on a touch screen device.

Hi

I do not have more devices than iPhone 6+ and iPad 2. I will ask our programmers to test it and they will be able to replicate this issue they will provide a fix for this problem. I will keep You updated to what they say.

Thanks! Please keep me posted.

JC

Hi

Programmers has found the problem. Please replace file /js/template.js with the one attached. Packages will be updated with this fix soon as well.

Great news, thanks for this. I am glad it was not my mistake!

BR

JC

Hello,

It is mostly OK now thanks but not completely. The submenus are now "sticky". If you click on a parent menu, you get a submenu drop down. If you click on a second parent menu, the first submenu stays open and another submenu drops down from the second parent. This means you can have a lot of submenus open at the same time. I doubt this is correct

It's worth on my site because there are more menus.

IMG_0087.PNG

IMG_0087.PNG

BR JC

Hi

We have not implemented this new code on our site yet, so please send me an access to ftp and url to Your site, so i'll be able to check.

I did send the URL and FTP info some weeks ago when the topic first arose.

Anyway, the problem is clearly visible in the Portfolio demo site as shown in the screen shots. Again, you need to use a touch screen device.

In the portfolio demo site there are only two parent menus with submenus. Click on each and you will get a persistent child menu which will remain on screen until the parent menu is clicked.

Hi

The url You have send me does not work. Anyway template should been updated already, so please download package again and update it on Your computer.

Or use this reference to implement the fix by itself if You cannot update template for some reason: https://github.com/GavickPro/Portfolio- ... 1544868684

I am not sure what's going on here. This ref: // Or use this reference to implement the fix by itself if You cannot update template for some reason: https://github.com/GavickPro/Portfolio- ... 1544868684 fails in a big way.

When it is replaced by the file from earlier in this thread >> template.jc the site works but with the persistent problem of the non-collapsing menus.

If you cannot fix this template in what? A month? Why not disappear it and put us out of our misery?

Gavick claim to be a group of keen programmers but you should not give away free what does not work. it's a bad thing for you image.

JC

Hi

I'm afraid I do not understand. Have You tried to implement the fix from the link to GitHub I gave You ? Or tried to update template ?

And very sorry for the delay. It's all my fault. I missed the mail where programmers informed me about this fix and they answered 20 days ago ;/

dziudek commented 20 days ago

if You still do not have this working please send me an access to FTP and I'll implement this fix for You.