The navigation bar fails to respond when clicked on mobile devices

Calling all developers! I need a helping hand to tackle an issue that's holding me back from completing this website. Can someone please take a look at on their smartphone browser and figure out why the responsive menu icon isn't working when clicked? You can grab the source code from https://github.com/kimanicharles911/hope_city_bible_church. Below is the HTML code snippet: https://i.sstatic.net/hNgG1.png

<nav class="nav-primary" aria-label="Main">
            <div class="wrap">
              <div class="responsive-menu-icon"></div>
              <ul id="menu-main-menu" class="menu genesis-nav-menu menu-primary responsive-menu">
                <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-103 current_page_item menu-item-116">
                  <a href="#" aria-current="page"><span>Home</span></a>
                </li>
                <li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">
                  <a href="#"><span>About</span></a>
                </li>
                <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112">
                  <a href="#"><span>Music</span></a>
                </li>
                <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111">
                  <a href="#"><span>Training</span></a>
                </li>
                <li id="menu-item-9230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9230">
                  <a href="#"><span>Blog</span></a>
                </li>
                <li id="menu-item-3048" class="menu-item menu-item-type-custom menu-item-object-custom social-icon facebook menu-item-3048">
                  <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/hcbcke/">
                    <span>
                      <i class="icon-2x icon-facebook"></i>
                      <span class="fa-hidden">Facebook</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-3049" class="menu-item menu-item-type-custom menu-item-object-custom social-icon twitter menu-item-3049">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-twitter"></i>
                      <span class="fa-hidden">Twitter</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-3050" class="menu-item menu-item-type-custom menu-item-object-custom social-icon youtube menu-item-3050">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-youtube"></i>
                      <span class="fa-hidden">YouTube</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-6279" class="menu-item menu-item-type-custom menu-item-object-custom social-icon instagram menu-item-6279">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-instagram"></i>
                      <span class="fa-hidden">Instagram</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-8331" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8331">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="fab fa-spotify icon-2x"></i>
                    </span>
                  </a>
                </li>
                <li id="menu-item-8332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8332">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="fab fa-apple icon-2x"></i>
                    </span>
                  </a>
                </li>
                <li id="menu-item-5105" class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105">
                  <form class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105" role="search" method="get" action="#">
                    <label>
                      <span class="screen-reader-text">Search</span>
                      <input type="search" class="search-field" placeholder value name="s" title>
                    </label>
                    <input type="submit" class="search-submit" value="Search">
                  </form>
                </li>
              </ul>
            </div>
          </nav>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To prevent conflicts between JavaScript files and jQuery files, ensure that you have added the most recent jQuery script before the bootstrap js script. The correct order for including the scripts is as follows:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1918e91918493cf8b92a1d0cfd0d7cfd1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

If the jQuery script is loaded after JavaScript, the functions may not work as intended.

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

Customizing CSS for Various Browser Sizes

I have a query regarding window-dependent CSS. It seems to be a common issue, but I am facing some difficulties with it on Wordpress. I am currently using the script recommended by Nettuts. My goal is to apply different CSS styles based on the user's ...

jquerycssresizewindow

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method for showcasing an element at random from a different URL?

Is there a way to display three random divs (with the class ".post-content") from a specific URL? I have the code to display the content of a div from another URL, but it lacks the randomization I'm looking for: <script> $(function(){ var ...

phpjqueryhtml

Unable to add texture graphics to the box element in an A-Frame simple environment

Currently, I am experimenting with the demonstration of a Basic Scene in A-Frame. However, when I reach the section about Applying Image Texture and Using Asset Management System, I encounter an issue where the suggested texture does not display as expect ...

htmlfirefoxthree.jsaframe

"Here's a cool trick: A guide on dynamically inserting a value into {% url tag %} using JavaScript within

Incorporating leaflet JS into a Django template, the aim is to display markers on a map where latitude and longitude are sourced from a queryset. Sending the queryset through views and utilizing the Django template language within <script> tags seeme ...

javascriptdjangoleaflet

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

javascripthtmlangularjsjson

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

I need help figuring out how to fill in an input field on a website using HTML. Here is what the section of the website () looks like: <div class="flex-item-fluid"> <input autocomplete="username" autocapitalize="off" ...

c#htmlseleniumautomation

Using Django Template Variables in JavaScript Functions

Within one of my templates, there is a for loop that iterates over all the items. Whenever a user likes or dislikes an item, it should trigger a function in my code. I successfully set up the button's HTML like this: <button onclick='update_li ...

javascripthtmldjangodjango-viewsdjango-templates

The Google Drive API's `copyfile` function is limited to accessing all files in the drive, even if just a copy operation is needed

I found a way to copy files using this page https://developers.google.com/drive/v2/reference/files/copy. However, it only works when I request permission , allowing me to modify any file in their drive, which is not ideal. My goal is simply to copy a publ ...

javascriptpythongoogle-drive-api

Reactjs may have an undefined value for Object

I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...

javascripttypescript

The input fields within a "form" are not functioning correctly with Jquery

Encountering an issue with my project involving a timetable that allows for dynamically adding rows with Jquery. The following are the codes: <?php session_start(); ?> <html lang="es"> <head> <meta charset="iso-8859-1"> ...

phpjqueryhtmlformsinput

Having difficulty loading the controller into my AngularJS module

I've been attempting to organize my angularjs controllers into separate files without success. Folder Structure: --public-- --js/controller/resturant.js --js/master.js --index.php Content of master.js angular.module("rsw",[ ...

javascriptangularjsmodel-view-controllerangularjs-controller

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

cssreactjsmaterial-uistepper

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Absence of property persists despite the use of null coalescing and optional chaining

Having some trouble with a piece of code that utilizes optional chaining and null coalescing. Despite this, I am confused as to why it is still flagging an error about the property not existing. See image below for more details: The error message display ...

javascripttypescriptmaterial-ui

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

In Angular Material expansion panels, the expanded input can be used to automatically open a specific panel when the page loads. However, in my dynamic accordion where all panels are optional, I want the first panel to be opened by default. I could manual ...

javascripthtmlangularangular-materialaccordion

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss

Incorporating jQuery tooltips within a dynamically refreshing jQuery div

Having trouble with jQuery tooltips (using Tipsy) on a dynamically included page. The tooltips work well on regular pages, but when I include the page through PHP and set up auto-refresh using jQuery, the tooltips stop working properly. The issue seems to ...

phpjavascriptjquerytooltiptipsy

Declare a Nodejs variable as public

Here is my nodejs script to retrieve the current weather on a specific location using the command line. // Index.js // Required Modules const program = require('commander'); const clear = require('clear'); const chalk = require('c ...

javascriptjquerynode.jsnpm

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage