Strange behaviour of navigation bar on mobile screens

Question

I'm using a version of Bootstrap CSS for this site and a live example would demonstrate this the best.

http://autorotation.org/jabilake/index.php?page=residential

Basically, on mobile screens, the parent nav element (li), "Projects", doesn't seem to work at all when you click on the actual word. However, click just right of the letter "s" and it works fine (i.e. goes to the page).

I tried a few CSS and JavaScript tricks, but no luck.

Any idea?

Thanks.

Answer 1

it only doesn't work when on the projects page or it's submenu pages. And its just the touch event not working. click is fine at that screen size, at least in my browser. I believe the issue is with the custom data attributes. Only on those pages does your menu contain data-toggle= and data-target= for the Projects li. If css is controlling the dropdown, you don't need this and I think the problem will go away. If javascript is controlling the dropdown perhaps it is using these values. try just removing the attributes and see what happens