Android chrome mobile variant navbar problems

[Rob Tait]

This is my first post on Talk Graphics and I have searched previous posts on this subject including Acorn's css options

Had to switch to using Web Designer 19 from Web Designer 23.5 because of issues with the latter in the short term.

My question relates to a mobile variant that uses a hamburger menu from Design Gallery>Navbar>Mobile
The hamburger menu has sub menus that are shown in mouse over status.
This works on iPhone safari, desktop chrome(shrunk), as the drop down sub menus are displayed and can be clicked to navigated.

But on samsung android chrome mobile touch screen(finger) something else happens:

• The android chrome browser overrides the mouse over and assumes a left click
• This clears the drop down sub menu making it impossible to select a sub menu easily
• With extra care it is possible to stroke the hamburger icon but this is not a viable solution

My first though on checking other websites is that this should be left click to trigger the sub menu drop down.
So I am not sure how to resolve this and need some advice based on experience:

• Would it be possible to use popup layers across multiple variant pages that are click based?
• There should be a solution out there as mobile browsers are what most people use?

So can anybody help with suggestion on a way forward?

This is the hosted website
http://ticehurstcommunityfriends.org

Thanks.......

[gwpriester]

Sorry for the delay. New members are not permitted links and your post was moderated. All good now.

Someone will have an answer for your shortly.

[Acorn]

@Rob, just to be sure.
Your Navbar on the mobile page is made from Xara's built-in Navigation feature? And that is is ... > Mobile > 1. Transparent that you used.

You want a click or touch on the hamburger to open the sub-menu options. This is a single button NavBar.
An overview is here: https://helpandsupport.xara.com/xara...ationbars.html.
The trick is the button (hamburger) does not have a link set.
Its sole job is to open the sub-menu.

Select the Hamburger and right-click and pick Edit Navigation Bar.
It is then a case of ensuring the button (hamburger) has no link set.

Can't help further as Pro+ v23.5.0 Bug is crashing my NavBar when I do this; another example of problems in this release.
Perhaps tomorrow.

Acorn

[Rob Tait]

@Acorn

Thanks for your reply

To answer your questions:
1) Yes I am using >Mobile 1. Transparent
2) The word doc below is what I see when I edit in Designer 19 when using Edit Navigation Bar and I click OK to save I get an Access violation.



In Designer + 23.5 I also get an access violation when trying to set the link option to "do nothing" when a file is the .

If I interpret your thinking then the left click is performing something hence it clears the sub menu from the screen, if it did nothing then it would not clear the sub menus.

Given that this works OK on iPhone Safari what is about Samsung Android Chrome that shows this problem.

The problem can be re-created in desktop chrome

1. Mouse over the hamburger shows the sub menus.
2. When left clicked the sub menus disappear

Then when using the finger in Android Chrome it decides how to interpret a finger tap as either finger over or finger left click.

It still leaves me wondering if Popup Layers are not a better option or are there issues with repeating them across multiple pages.

Any suggestions are welcome.....

[Acorn]

It still leaves me wondering if Popup Layers are not a better option or are there issues with repeating them across multiple pages.

Rob, I'm also getting access violations in 23.5.0 so I'm waiting for the next Bug fix hoping Xara knows about this one. It's all quite messy at the moment, similar to being on shifting sands.

If you choose the pop-up layer route, things to watch:

• How to make the pop-up Sticky and keep the Links working - another Xara bug.
• The need to Repeat across all Variant pages but disable the Link to a page when on that page. If you don't the page jumps to the Top, losing place.

Acorn

[MB365]

New Plus release is live 23.5.1. Details are in the link.

https://www.talkgraphics.com/showthr...enance-Update)

[Rob Tait]

I have now downloaded 23.5.1 and published the website relating to this post.......

The problem has been fixed!

When using samsung android chrome mobile touch screen(finger) the hamburger menu appears correctly and the sub menu options can be navigated easily.

So a big thankyou to Xara for this latest release.......

As a result of exploring popup menus it does look like this would create a better user experience, but that is for another day.

Thankyou for your help @Acorn

@Rob

[Rob Tait]

Download 23.5.1 and published the resulting website......

So now on samsung android chrome mobile touch screen(finger) on the hamburger menu brings up the sub menus correctly and there is no left click activity.

The problem has been cured ...so thank you Xara for doing that .......

Having investigate popup layers I think this may offer a richer user experience, but that is for another day.

Thank you Acorn for your help in this matter

[Acorn]

Download 23.5.1 and published the resulting website......
So now on samsung android chrome mobile touch screen(finger) on the hamburger menu brings up the sub menus correctly and there is no left click activity.
The problem has been cured ...so thank you Xara for doing that .......
Having investigate popup layers I think this may offer a richer user experience, but that is for another day.
Thank you Acorn for your help in this matter

Rob, I agree Xara's Navbar approach is fairly old school and I have tried lots of alternatives that offer a 'richer' experience. Some are listed in my nuggets Link in my signature.

One day.

Acorn