I have followed numberous tutorials to create a responsive website with Bootstrap 3. However, when I test my site locally on my mobile device the Href links don't appear to work. The navbar toggles but will not expand when touched neither does the accordion links as well as modal links. The only link that does work is a link to facebook. My question is does the site need to be live on a server for it to work or have I done something wrong here?
Lets start with my toggling navbar. The navbar works on a desktop and i can resize my browser and it toggles as expected but when testing locally on a mobile device touch screen, it toggles but doesn't expand when touching the toggle icon. I've tested this on my mobile by copying it across but the toggle element doesn't expand the menu. any help would be appreciated.
<div class="jumbotron" id="jumbotron-nav">
<div class="container">
<nav class = "navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type= "button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarpage">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Archways</a>
</div>
<div class = "collapse navbar-collapse" id="navbarpage">
<ul class = "nav navbar-nav navbar-right">
<li><a href = "#Aboutus" data-toggle="collapse" data-target="#navbarpage">About us</a></li>
<li><a href = "#Roomhire" data-toggle="collapse" data-target="#navbarpage">Room Hire</a></li>
<li><a href = "#Treatment" data-toggle="collapse" data-target="#navbarpage">Treatment</a></li>
<li><a href = "#Meettheteam" data-toggle="collapse" data-target="#navbarpage">Meet the team</a></li>
<li><a href = "#" data-toggle="modal" data-target="#contactus">Contact us</a></li>
<li><a href = "#Findus" data-toggle="collapse" data-target="#navbarpage">Find us</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
