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

Adding inline SVGs to a Nuxt 3 Vite project: A step-by-step guide

Hey there, I've been struggling with importing inline SVGs into my Nuxt3 Vite project. Any advice would be greatly appreciated. I discovered that using <img src="~/assets/images/icons/push-icon-chatops.svg" /> works, but I actually ne ...

javascriptvue.jssvgvitenuxtjs3

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:

success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the nor ...

javascriptangularjsajaxangular-datatables

Sending a Thunk to the store using Typescript

Within my primary store.ts file, the following code is present: const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) ); store.dispatch(fetchUser()); Upon initial rendering, an action is dispatched to fetchUser in ord ...

javascriptreactjstypescriptreduxredux-thunk

Manipulating the DOM within an Angular application

What is the best way to perform DOM manipulation in Angular without using jQuery? Here is an example of code using jQuery: $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass(& ...

jqueryangularbreadcrumbsdom-manipulation

Which is better for cycling through a list of items: CSS or JavaScript?

Currently, I have a navigation bar set up as an unordered list (<ul>), but some list items are not visible. I want to implement functionality where clicking arrows will move the elements left or right by hiding or showing the leftmost or rightmost it ...

javascriptcss

What is the best way to control the amount of rows displayed in a textarea?

Does anyone know a simple solution for restricting the number of rows a user can input in a textarea with jquery/javascript? Appreciate any help! ...

jquerytextarea

Unable to retrieve information from the database during the http.get request

Hey everyone, I've encountered an issue that I need help with. I'm working on retrieving data from a database using an HTTP call and then returning it to the front end. Here's what I have so far: app.get('/contentHandler/post/frontPage ...

javascriptnode.jsangularjsmongodbexpress

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

What is the best way to retrieve the dimensions of a custom pop-up window from the user?

Currently, I am in the process of developing a website that allows users to input width and height parameters within an HTML file. The idea is to use JavaScript to take these user inputs and generate a pop-up window of a custom size based on the values pro ...

javascripthtml

Is there a way for me to position my chat messages on the right side in the chat room?

I have a react chat application and I'm looking to customize the appearance of my messages. Currently, all entries with an orange vertical bar belong to me and are displayed on the left side of the chat room. I would like to move them to the right sid ...

cssreactjs

The video on my site is refusing to play

I'm having an issue with a 2-second video that is not playing, yet when I tried a 10-second video it worked perfectly. Why is this happening? Could it be that HTML does not support videos that are shorter than 1-2 seconds? It seems like it's onl ...

htmlcssvideoattributes

Discovering the smallest and largest values in an object literal using JavaScript

I am looking to extract the minimum value from an object literal and utilize it in AngularJS, as shown below: scope.data = { 'studentName' : "Anand", 'socialStudies' : "98", 'english' : "90", 'math' ...

javascriptjqueryangularjs

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...

javascripthtmlcss

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

javascriptjqueryhtmlcss

The function for converting a jQuery element to a DOM element is yielding a blank string as

What is the reason behind this code not working as expected: function getElementWidth(el){ return $(el)[0].style.width }; getElementWidth('#someElementIdId'); // returns -> "" However, when using this code... function getElementWidth(el){ ...

javascriptjquery

How to handle a Node.js promise that times out if execution is not finished within a specified timeframe

return await new Promise(function (resolve, reject) { //some work goes here resolve(true) }); Using Delayed Timeout return await new Promise(function (resolve, reject) { //some work goes here setTimeout(function() { resolve(true); }, 5000); } ...

javascriptnode.jstypescriptpromise

React - the function executed within a loop is only invoked once

I have implemented a click handler in my book component to facilitate page flipping. This handler appends the necessary classnames to the pages, enabling me to set up the CSS for the page flip animation. // ---------- Handle the click event on the book p ...

javascriptreactjsfunctionloops

Load image asynchronously using a mirror server in React/Next.js with a set timeout time

For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...

javascriptreactjsnext.jsipfs

HTML control for adjusting the pan and tilt of a device

I'm looking to develop an interactive input where users can drag a dot within a box and see the 2D coordinates of that dot displayed. The goal is to use this feature to control pan and tilt values. A similar functionality from another application is s ...

javascripthtmlformsinputcoordinates

Using jQuery to trigger an event when an element is empty or when the element contains children nodes

Is there a way to create a jQuery script that can monitor the children of an element? If the element does not have any children, default scrolling for the entire page is enabled. If the element has children, scrolling for the whole page is disabled. The ...

javascriptjquery