Okay
  Public Ticket #1167308
Burger menu not functioning on mobile device.
Open

Comments

  •  2
    Jayson started the conversation

    (Agency Template)

    On my desktop, everything functions as it should even when I resize the window 

    However- once I push my code up to my server and view the page on my mobile device, I notice that the burger menu is unresponsive. I try to click it, but nothing happens and the links within are inaccessible.

    Please Assist 

    Thank You

  •  84
    8 Guild replied

    Hi!

    Burger menu action, works using jScript, but on your page is an script errors (screenshot), it must be fixed for firs of all. Did you copy all files to server, did you make some changes in js files?

  •  2
    Jayson replied

    I've added all files to server please check attached. Slight correction to the previous statement....files within the menu work but the burger menu icon is non-responsive on mobile device or when screen size reduced.

    Also please check references.png, am I calling the scripts correctly? shouldn't it start with https://...assets/js/vendor/revo/extensions/revolution.extension.video.min.js

    Thanks

    Attached files:  File location on server.PNG
      references.PNG

  •  84
    8 Guild replied

    Hi again! 

    This files ( screenshot ) no need to connect in HTML file. The Revo Slider ask for them only when you run it without server. But they must be present in their folders, because revo use them automatically.

    And keep in mind, this files uses jQuery framework, but you connect them even before jQuery, thats why you have an error on the page ( screenshot ). I recommend you to connect all scripts at very bottom of file, right before startapp-theme.js screenshot ).

    However if you just put theme files from main.zip to server, it must work properly without any changes!

    Regards,

    8Guild Team

  •  2
    Jayson replied

    I Checked the Original Agency Template on your own site, same problem, Guys this is the only template from your package where the menu is not functioning 100%. According to my colleague, it might be caused by an overlapping div. Please fix this so the issue can be resolved once & for all. Thank you 

    http://the8guild.com/themes/html/startapp-html/agency/index.html

    Attached files:  Menu.PNG
      From Guild8 Site.PNG

  •  84
    8 Guild replied

    Hi!

    I have investigate the problem, and have a solution for you.

    Just add following code, at very bottom of your css file:

    .fs-menu-wrap.is-visible {
      max-width: 70%;
      left: 50%;
      transform: translateX(-50%);
    }
    @media screen and (max-width: 768px) {
      .fs-menu-wrap {
        padding-left: 0px;
        padding-right: 0px;
      }
    }
    

    Or you can add this to sass and compile it.

    Best of luck with your project!

  •  2
    Jayson replied

    I Checked the Original Agency Template on your own site, same problem, Guys this is the only template from your package where the menu is not functioning 100%. According to my colleague, it might be caused by an overlapping div. Please fix this so the issue can be resolved once & for all. Thank you 

    http://the8guild.com/themes/html/startapp-html/agency/index.html 

  •  2
    Jayson replied

    Thank You, I'll give it a go. Please ignore duplicate

  •  2
    Jayson replied

    Apologies...which CSS file?

  •  84
    8 Guild replied

    Hi,

    You need to add this code to your main theme.min.css which is attached to your page in the <head> tag of html document. Please see attached screenshot. https://www.evernote.com/shard/s7/sh/962350cf-b9c0-449f-8cbe-a88a87e6b303/dbe7d1ac96bc8186 

    Make sure you add these fixes at the most bottom of the file.

    Best regards,

    8Guild Team

  •  2
    Jayson replied

    Thank you so much!

    Seem to working when I resize chrome but when I try to access menu on my iphone 4s, it doesn't respond, even the background image doesn't appear, Is this a Safari iOS issue?   

  •  84
    8 Guild replied

    Hi, again!

    Unfortunately, apple stop supporting 4th version of iPhone, and oldest version which xCode provide to debug, is 5th. And it works properly. Try to test it on other mobile devices.

    Regards,

    8Guild Team

  •  2
    Jayson replied

    Hey Guys

    Your support has been excellent thus far, really appreciate it. 

    I haven't come across a website that doesn't load with my iPhone 4s, I don't want the only website that's not compatible with older model phones, is there nothing you guys can do or recommend? You'll most likely see an increase in sales especially from my part of the world. Thanks

    Regards

  •  84
    8 Guild replied

    Hi Jayson,

    We tested your website on iPhone 4s using official Apple Xcode software. Menu seems to work correctly. Please see this video 

    Unfortunately, we do not have real iPhone 4s at our disposal. Please try to clean Safari cache.

    Best regards,

    8Guild Team