Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1
    Join Date
    Dec 2009
    Location
    Dabo (France)
    Posts
    33

    Default 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.

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,506

    Default 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.

  3. #3
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    952

    Default Re: Hamburger menu doesn't work in tablet format

    Quote Originally Posted by Marc View Post
    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.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  4. #4
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,506

    Default 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?

  5. #5
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    952

    Default 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:

    Click image for larger version. 

Name:	Mobile_Header_Sticky_Header.jpg 
Views:	31 
Size:	115.6 KB 
ID:	133230

    There should be a mobile header to match the desktop and tablet headers.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,506

    Default Re: Hamburger menu doesn't work in tablet format

    Point taken.

  7. #7
    Join Date
    Dec 2009
    Location
    Dabo (France)
    Posts
    33

    Default 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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,830

    Default 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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    952

    Default 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.

    Click image for larger version. 

Name:	Arrange_Bring_Menu_icon-to-front.jpg 
Views:	27 
Size:	58.5 KB 
ID:	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:

    Click image for larger version. 

Name:	Mobile_header.PNG 
Views:	20 
Size:	831.8 KB 
ID:	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.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  10. #10
    Join Date
    Dec 2009
    Location
    Dabo (France)
    Posts
    33

    Default 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.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •