Click the navigation bar to toggle it on and off

I have a script that creates a navbar. Currently, the dropdown menu only opens when hovered over. The issue arises when accessing this on a mobile browser, as the dropdown menu does not open. How can I modify this script to make the dropdown menu open when clicking on the parent menu?

<div class="collapse navbar-collapse offset w-100" id="navbarSupportedContent">
            <div class="row w-100 mr-0">
              <div class="col-lg-7 pr-0">
                <ul class="nav navbar-nav center_nav pull-right">
                  <li class="nav-item ">
                    <a class="nav-link" href="index.html">Home</a>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Package</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="category.html">Pestgre</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Blog</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="blog.html">Blog</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="single-blog.html">Blog Details</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item submenu dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                      aria-expanded="false">Pages</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item">
                        <a class="nav-link" href="tracking.html">Tracking</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="elements.html">Elements</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
javascripthtmljquerycss

Answer №1

When creating a mobile version, consider using a hamburger menu (the three lines you commonly see). You can either find the icon or create it yourself. In JavaScript or jQuery, utilize the following code:

const getMenu = document.getElementById("menuButtonsId"); //make sure to execute this code after the page has loaded to ensure the button or icon is found.
getMenu.onclick(function(){
  if (the menu is closed) {
    open the menu
  } else {
    close the menu
  }
})

If you prefer jQuery, you might try something similar to this:

$("#menuButtonsId").click(function() {
  if (the menu is closed) {
    open the menu
  } else {
    close the menu
  }
})

Add in the necessary text where I've indicated in the code. Hopefully, this helps address your query!

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

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

`In Firefox, the footer refuses to remain anchored at the bottom of the page`

After using the following code, my footer stays at the bottom of my page: In my vue project, #app serves as the container for my content and footer. #app { min-height: 100%; position: relative; } .footer { position: absolute; bottom: 0; width: ...

cssvue.jsfirefoxposition

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

Activate the opening of a .docx file in a new tab by utilizing an anchor tag

I have attached a docx file containing the terms and conditions for our project. Now, I would like to open it in a new tab. By clicking this link, you can view the <a title="click to view terms and conditions" style="color:blue;" target="_blank" href ...

javascripthtmlasp.nethrefdocx

Exploring the Scope of LocalStorage in Javascript

I've recently begun working with local storage and encountered some scope issues. Whenever I try to console.log(test), the second if statement returns undefined. What am I missing here? This is my current code; $("document").ready(function(){ ...

javascripthtmlscopelocal-storage

Guidelines for capturing a div screenshot with javascript

Let's say I have a div containing an image source. <div> <p class="row">With custom CSS</p> <img src="/images/midhun.jpg"> </div> When a button is clicked, I want to display a screenshot of this image in another div. C ...

javascriptjqueryangularjs

Promise rejection not handled: Trying to modify headers after they have already been sent to the client

I can't seem to figure out why these errors keep popping up. I've tried looking for solutions online but haven't had any luck. Here is the node function I'm using for an API call: exports.GetEmployeeConfirmationList = function (req, res ...

javascriptnode.jsangularexpresshttp-headers

Using CSS height 100% does not function properly when the content overflows

Here's what's going on with this code snippet: HTML <div class="one"> <div class="will-overflow"> </div> </div> CSS html, body { width: 100%; height: 100%; } .one { height: 100%; background: r ...

javascripthtmlcss

Toggle switch unable to reset upon reloading the page

Issue with Toggle Switch Not Resetting on Page Reload I am encountering a problem with a toggle switch I implemented from the W3schools example (link here). Unlike in the W3schools editor where it resets its state upon reload, my toggle switch remains in ...

htmlcsscheckeduncheckedtoggleswitch

How to extract data from Google Sheets using NODEJS?

When utilizing the REST API to extract data from a cell range in Google Sheets, the response returned is as follows: { "range": "RECORD!A2:J2", "majorDimension": "ROWS", "values": [ [ "07/11/2016", "21:20:10", "3", "MAIN" ...

javascriptjsonnode.jsgoogle-sheets

Exclude certain packages from being processed in webpack

After setting up my webpack configuration, everything was running smoothly with the specified packages in the package.json: { "peerDependencies": { "react": "16.13.1", "react-dom": "16.13.1", ...

javascriptreactjswebpackpackage.jsonstorybook

Conditionally displaying ng-options in AngularJSI'm looking for a

After spending hours searching, I'm unable to find a solution to my problem. I was able to implement it before but lost the code and can't remember how I did it. I need to display only certain array values in a select box using ng-options. The d ...

javascriptangularjsng-options

Using jQuery ajax to insert multiple data points

To process my form values, I target the form class <form class="my_form_class">: jQuery.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: my_form_class, context: this, success:function(data){ ...

jqueryajax

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

Will other functions in the file run if only a single function is imported?

The file bmiCalculator.ts contains the following code: import { isNotNumber } from './utils'; export default function calculateBmi(height: number, weight: number) { const bmi = weight / Math.pow(height / 100, 2); if (bmi < 18.5) { re ...

javascriptnode.jstypescriptexpressnode-modules

Connecting to particular sections on other pages

My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...

html

creating a loop to handle AJAX requests for JSON data

My JSON call successfully loads the data.root.offer[0].region data into a div with the class .region. Here is the code snippet: $.getJSON('json/data.json', function(data) { $('.region').html('<p>' + data.root.offer[0] ...

javascriptjqueryajaxjson

What could be causing the absence of the box within the div element?

I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is ...

htmlcss

Tips for obtaining response headers

Currently, I am utilizing Angular version 15.0 and retrieving a list of items from the backend (ASP.NET Core 5) with an additional item attached to the header. The GET method in the client-side service is as follows: /** GET Paged commodities from the s ...

javascriptangulartypescript