Website links work on Desktop, not on Mobile

Question

Here is my site: www.apologeticscentral.co.za

The menu links works on desktop, but not on mobile. Also when simulating the mobile site using Chrome developer tools, the menu links work as well.

On mobile, the menu links work when using force touch (on iPhone), and when I hold it down and say open, it works as well. But a simple click does nothing. Any ideas what the cause may be?

<nav id="nav">
    <ul class="links">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="apologia/index.html">Apologia</a></li>                         
        <li><a href="argument/index.html">Argument</a></li>
        <li><a href="articles/index.html">Articles</a></li>
        <li><a href="bible/index.html">Bible</a></li>
        <li><a href="FAQ/index.html">FAQ</a></li>
    </ul>
    <ul class="icons">
        <li><a target="blank" href="https://twitter.com/ApologeticsC" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
        <li><a target="blank" href="https://www.facebook.com/apologeticscentral" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
        <li><a target="blank" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>

    </ul>
</nav>

Answer 1

My problem was that Angular Material was conflicting with my CSS. I created a separate module and I did not include material in that module, then it worked fine.