I am developing a website and testing it on my iPhone for mobile view. still on `bootstrap 3`. It having some issue. when tap on the nav button on my iPhone nothing happened no dropdown list. and when on desktop it work with mouse click. on top of that I use JS to load this page to the index.jsp. Thanks. 

```js
    $(document).ready(function () {
        console.log("testing");
        $('#header').load('jsp/Header.jsp');

        $('#footer').load('jsp/Footer.jsp');});

```

```html

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>nav</title>
    </head>
    <body>
     <div class="col-sm-2" id="nav">
            <sec:authorize access="hasRole('ROLE_USER')">
                <a class="dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown">&#9776; 
                    <span class="caret"></span></a>
                <ul class="dropdown-menu" id="dropdown">
                    <li>
                        <div class="col-sm-2 align-top " id="home">
                            <a href="${pageContext.request.contextPath}/displayHomePage"><span class="glyphicon glyphicon-home"></span></a>
                        </div>
                    </li>
                    <li>
                        <div class="col-sm-2 align-top " id="home">
                            <a href="${pageContext.request.contextPath}/displayAboutUsPage"> About Us</a>
                        </div>
                    </li>
                    <li> <div class="col-sm-2 align-top " id="news">
                            <a  href="${pageContext.request.contextPath}/displayNewsFeedPage">News</a>
                        </div></li>
                    <li><div class="col-sm-2 align-top " id="blog">
                            <a  href="${pageContext.request.contextPath}/displayNewPostPage">Posts</a>
                        </div></li>
                        <li>
                        <div class="col-sm-2 align-top " id="home">
                            <a href="${pageContext.request.contextPath}/displayRegistrationForm">sign up</a>
                        </div>
                    </li>
                    <li> <div class="col-sm-2 align-top " id="log-in">
                            <a  href="${pageContext.request.contextPath}/">Sign In</a>
                        </div></a></li>

                </ul>
            </sec:authorize>
        </div>

       <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
       <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
       <script src="${pageContext.request.contextPath}/js/Home.js"></script>
```