The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown list appears. However, when I test it on desktop with a mouse click, it works just fine. Additionally, I am utilizing JavaScript to load this page to the index.jsp file. Thank you for any assistance in resolving these problems.

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

        $('#footer').load('jsp/Footer.jsp');});
 
   
    <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>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a try

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" href="${pageContext.request.contextPath}/">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
      <sec:authorize access="hasRole('ROLE_USER')">
        <ul class="nav navbar-nav">
          <li class="active"><a href="${pageContext.request.contextPath}/home">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="${pageContext.request.contextPath}/page2">Page 2</a></li>
          <li><a href="${pageContext.request.contextPath}/page3">Page 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="${pageContext.request.contextPath}/signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="${pageContext.request.contextPath}/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </sec:authorize>
      </div>
    </div>
  </nav>

  <div class="container">
    <h3>Collapsible Navbar</h3>
  </div>

</body>

</html>

Answer №2

It is recommended to include your js and jQuery scripts in the head section of your HTML like this:

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>nav</title>
  <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>
</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>

If you are encountering a similar issue, following this approach may help resolve it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...

javascripthtmlcsskeyframe

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

angularjshtmltwitter-bootstrapdatepicker

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it. Desired outcome: The buttons should trigger the display of selected checkbox values in their respective ...

javascriptjqueryhtmlcssbootstrap-modal

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

css

Invoking a SOAP service method defined by a message contract in soap.js

I am currently working with a soap service that utilizes message contracts. According to the rules of message contracts, both the request and response messages must be objects. Message contracts are essential for me because they provide complete control ov ...

javascriptwcfsoap

Uncover the hidden href link that has been obscured using the code javascript:void(0)

Currently, I am in the process of developing a straightforward PHP script to extract the actual link from a website that conceals the real link/key using the javascript:void(0) approach. Upon inspecting the source code, I noticed that the href link is empt ...

javascriptphpjquery

Transfer data via ajax to the controller

I need assistance with storing a file in my database using Tabulator without having a form already created. I am currently creating a simple input element like this: var editor = document.createElement("input");. After clicking the file, it trigg ...

javascriptc#jqueryasp.netasp.net-core

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

javascriptjqueryhtmlcssbutton

Challenge with organizing space within a nested layout of flexboxes and CSS grids

Is it possible for my aside element and div.content to evenly split the available space in the container? Additionally, should the grid within div.content take up all the vertical space? The issue I'm encountering is that grid items aren't able ...

htmlcssflexboxcss-grid

The storage format of the input field is handled differently on the angularjs controller side

Check out the plunker link for this directive in action. A comma is automatically added as the user types in the input, and it displays numbers with 2 decimal places. However, there seems to be an issue where entering '2300.34' results in ' ...

javascriptangularjsstringvalidationdirective

The functionality of jQuery's onclick event is not functioning as intended

I have been struggling to make the onclick event work, but unfortunately it is not happening for me. Here is the code I am working with: HTML <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> ...

jquery

Is there a way to address this scrollbar issue without relying on HTML?

Currently, I am working on a website where the only customization allowed is related to CSS. While I've been able to make progress, I've encountered an issue with the scrollbar placement. The scrollbar is extending beyond the boundaries of the di ...

cssscrollbar

Tips for personalizing your fisheye menu!

I'm not very experienced with jQuery and JavaScript. I used the jqDock plugin to create a fisheye menu for my website, and with some help from a friend, I was able to give the menu an active state so that specific menu element would remain expanded on ...

jqueryjquery-pluginscustomizationflickerfisheye

What could be the reason for the loss of default browser focus on this accordion navigation?

Why is the browser default focus being lost on this accordion navigation? <div class="panel panel-default"> <div class="panel-heading"> <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-to ...

htmlcsstwitter-bootstrapaccessibility

Bring in multiple classes from node_modules

During the development of my package, I have organized my repository with the following structure: src - Requests.js - Constants.js package.json The package.json file contains the following information: { "name": "package-name", "version": " ...

javascriptnpmecmascript-6

Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...

htmlcssreactjsmaterial-uiicons

How can I show the content of a variable in Next.js without displaying any HTML tags?

For instance, I have the description variable set up like this in NextJS: description={storeDetail?.translation?.description} When outputting the description, it shows me <p>Tenis</p>. However, I would prefer to display just "Tenis" without th ...

htmlnext.js

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

javascripthtmlangular

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

Exploring the wonders of retrieving JSON data in PHP through an Ajax request

A front-end developer is sending an array of data formatted as a JSON object using an Ajax call. The JSON object structure is shown below: { "name": " Test Name ", "image_url": "test URL", "include": [ "1" ], "dimension": [ null ], "media_type" ...

javascriptphpjqueryajaxjson