Hamburger menu doesn't work in tablet format
Hi,
I created a web site based on a xara's template.
Everything works well except the hamburger menu on left side when I reduce the screen to a tablet format.
Phone size works, full screen works; but not in a size inbetween.
an idea ?
here's the concerned website.
https://www.lalogedupicnoir.fr/
Thanks.
Re: Hamburger menu doesn't work in tablet format
I tried the site in Firefox on my iPhone and the menu does work. But there is a slide show or something that makes the hamburger menu go away.
It works fine in Safari.
I think the problem is with the black photo with the black bird.
Re: Hamburger menu doesn't work in tablet format
Quote:
Originally Posted by
Marc
Hi,
I created a web site based on a xara's template.
Everything works well except the hamburger menu on left side when I reduce the screen to a tablet format.
Phone size works, full screen works; but not in a size in between.
an idea ?
here's the concerned website.
https://www.lalogedupicnoir.fr/
Thanks.
This might be the issue: the Hamburger icon in the tablet variant does not appear to have a link to its popup menu (which I assume is in the Page & Layer Gallery for the Tablet variant & similar to the Desktop variant). Hopefully, there is a menu popup layer in the tablet variant, else you will have to create one similar to the Desktop variant.
@Gary P > I think the "black" hamburger icon in the mobile variant is obscured with the bird image because the image happens to be black in the top left-hand corner, but it is there.
If the OP wanted to have consistency with the tablet and desktop variants, a sticky rectangle could be placed under the mobile sticky icons to ensure they were always visible, no matter what image is underneath.
Re: Hamburger menu doesn't work in tablet format
Gary - What cell did you visit the image with? I worked OK on my iPhone in Safari and Firefox. Might be an android issue?
1 Attachment(s)
Re: Hamburger menu doesn't work in tablet format
Gary,
It worked on my Android mobile correctly with the exception of the missing menu icon in the bird picture (which is just obscured by the black in the image). However, you can see the tablet error on a desktop (with a browser squeezed to bring up the tablet variant). It was also the case that if a turn my mobile to landscape, which brought into play the tablet variant, that on the tablet variant the icon link does appear to be missing.
This is the mobile issue, which is different from the tablet icon missing link:
Attachment 133230
There should be a mobile header to match the desktop and tablet headers.
Re: Hamburger menu doesn't work in tablet format
Re: Hamburger menu doesn't work in tablet format
Thanks for investigation.
I do not think that it is linked to the black colour of the picture because the pictures are changing and others are not black or dark.
I guess it is an issue with variant.
I have only two variants in my site (Main)+(Mobile), could it be the issue ?
Because I have another web site with only two variants also and it works for tablets, but that one is build without a sliding hamburger menu, that's a difference.
May I share the .web file if someone could have a quick look please ?
Thanks in advance.
web file here
Re: Hamburger menu doesn't work in tablet format
Marc. not looked at your design but you have a 960x66px centred White box with no opacity (transparent) on the menu that has a link of javascript:; and which can cover the hamburger icon, even on Main.
Acorn
2 Attachment(s)
Re: Hamburger menu doesn't work in tablet format
The issue (or least one of them ) is on the desktop variant where the sticky icon needs to be brought forward to the front. What appears to happen otherwise is that as the browser width decreases the sticky black banner slides across the sticky icon. This is not obvious because for some reason the designer placed the header above the top of the page.
When I tested this it worked OK.
Attachment 133231
There are some strange objects scattered about which you can see if you switch to SOLO mode for each layer, including two white rectangles in the above image.
On the mobile layer text scrolls around the menu button and header which cannot be what was intended; easily fixed if you place a sticky header (same black rectangle) at the top of each page:
Attachment 133232
Some text on the mobile home page has found its way to the MouseOver layer, again I doubt this was intended.
If you are still stuck I can upload the mods, but it's too big for TG.
Re: Hamburger menu doesn't work in tablet format
Hello guys,
Thanks Gary for your quick and right resolution. It works now.
You are right, some intended things are travelling in the web site. I cleared them.
I really appreciate your help. Thanks again.