0

I just got done making a simple HTML/CSS website for one of our products and was pretty happy with myself, until one of my colleagues mentioned the menu doesn't work on iOS devices... Which is true!

It does not work on iPhone (6, 8 and X tested), nor on iPad, but works perfectly fine on desktop, Android and even Chrome Dev Tools emulating iOS devices.

I'm quite lost here as I already tried the following:

  • Change the href="javascript:void(0);" to href="#"
  • Change the anchor tag to a button tag
  • Change the anchor tag to a span tag with cursor: pointer;
  • Put a pointer: cursor; in the anchor tag CSS
  • I even tried scrapping the whole navbar for a Bootstrap one, with the issue still persisting

Now I know it has to be related to CSS or Javascript as the button DOES register the "click" since when I changed the href to #, it added that to the url of the page.

I took the code for the responsive menu on W3schools.

function hambClick() {
    var x = document.getElementById("myMenu");
    if (x.className === "menu") {
      x.className += " responsive";
    } else {
      x.className = "menu";
    }
  }

I would be eternally grateful if someone could help me out with this. I made a codepen with most of the original code untouched here.

Thanks guys!

Rot-man
  • 18,045
  • 12
  • 118
  • 124
Alex St-Cyr
  • 1
  • 1

1 Answers1

1

I would go back to using the "#" character in the "href" attribute and then adding return false in your function, like so:

function hambClick() {
  var x = document.getElementById("myMenu");
  if (x.className === "menu") {
    x.className += " responsive";
  } else {
    x.className = "menu";
  }
  return false; // prevent default action
}

This will prevent the default action of appending the # to the URL in your address bar (see What's the effect of adding 'return false' to a click event listener?) so the function can run.

Mark Hillard
  • 202
  • 3
  • 9
  • Hi Mark, Thanks for your answer! I implemented the change to my test version, but it still does not work on iOS devices... Curiously enough, the # is still appended to the end of the URL. – Alex St-Cyr Mar 20 '19 at 20:38
  • @AlexSt-Cyr, I looked into this further and it appears to be a bug in iOS. According to https://stackoverflow.com/questions/10152577/a-href-onclick-return-false-not-working-in-safari-ios, it appears removing the "#" from the href attribute works, and then you would use CSS `cursor:pointer;` to make it look like it's still a link. Not sure if this is ideal for your situation though. – Mark Hillard Mar 21 '19 at 02:50
  • Hey Mark, thanks for the link, just got done testing it and nope, still does not work on iOS, but does work on other devices... At this point I'm pretty sure it's got something to do with how iOS devices process fixed CSS positioning or something as a colleague was once frantically clicking his iPhone screen after having clicked the menu button and opened a page that's only accessible through the menu. We didn't see any link tho, so definitely a weird behavior! – Alex St-Cyr Mar 22 '19 at 20:26