The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click the menu bar. I'm having trouble understanding what's wrong with the click function. Can you please recommend a solution to help me deal with this issue?

Below is the code snippet: 

.shown {
  display: block !important;
}

.mobile-menu {
  position: absolute;
  z-index: 999;
  height: 100vh;
  width: 100%;
  background: #e4e3e3;
  top: 0;
  left: 0;
  line-height: 2;
  display: none;
  overflow: hidden;
  z-index: 9999;
}

.mobile-menu .menu-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
  width: 100%;
}

.mobile-menu .menu-list .menu-item {
  width: 100%;
  text-align: center;
}

.mobile-menu .menu-list .menu-item .menu-link {
  font-size: 22px !important;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  display: block;
  transition: all .5s ease;
  color: #00A139;
}

.mobile-menu .menu-list .menu-item .menu-link:hover {
  color: #ffffff;
  background: #00A139;
}
<!-- mobile menu -->
<div id="menus" class="mobile-menu">
  <ul class="menu-list">
    <li class="menu-item">
      <a class="menu-link" href="products.html">PRODUCTS</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="sustainability.html">SUSTAINABILITY</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="compliance.html">COMPLIANCE</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="investors.html">INVESTORS</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="about.html">ABOUT</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="contact.html">CONTACT</a>
    </li>
  </ul>
</div>
<!-- End mobile menu -->

<a href="" id="myBtn" class="humburger d-lg-none d-md-none">
    aaaaaa
</a>

javascriptcss

Answer №1

Upon reviewing the code you have provided, it appears that the following elements are missing:

  • In HTML: an onclick() attribute connected to a div or button.
  • In JavaScript: a function that triggers the created function (which is linked to the HTML onclick).

To illustrate, below is a simple yet effective example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

    <body>

    <button type="button" name="button" onclick="changeBackground()">Change background</button>

    <script type="text/javascript">
        function changeBackground() {
        document.body.style.background = "black";
        }
    </script>

    </body>

</html>

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

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

In order to dynamically add the following element to the DOM during run time, I need assistance... <input type="text" name="imagesToAdd" value="3566"> My initial attempt was to use Selenium JavascriptExecutor for this task. However, I encounter ...

javajavascriptseleniumexecutor

Using Vue.js to dynamically assign CSS classes based on variables

Is it possible to achieve this with a dynamic class like the following? <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' "> I have been struggling to find the correct syntax for this. T ...

cssvue.jsvariables

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

AngularJS $http.get('') is throwing an error because some parameters are missing

I am currently working on an application that utilizes OAuth for authentication, but I am facing some issues with passing the URL parameters correctly. Despite trying various methods, my API keeps returning an error stating that the username and password a ...

javascriptangularjscordovaoauth

The Cross-Origin Request has been blocked due to the Same Origin Policy prohibiting access to the remote resource. The reason for this is that the CORS preflight response was unsuccessful

SERVERSIDE // Establishing Headers app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE"); res.header("Access-Control-Allow-Headers ...

javascriptvue.jsexpresscors

Login should only be tried when the error code is 403

I have encountered an issue with checking if the API token is expired. The process involves making a GET call, and if a 403 error is received from the API, then re-login is required. This is what I tried: app.get = async (body) => { return new Pro ...

javascriptnode.jsexpress

The latest version is available, but remember to update @react-navigation/bottom-tabs, @react-navigation/stack, and @react-navigation/drawer to at least version 5.10.0

As a newcomer to react-native, I am currently attempting to execute a program using expo but encountering a yellow error message. The error states: 'It seems that you are utilizing an outdated version of the react-navigation library. Please ensure th ...

javascriptreactjsreact-nativeexponpm-install

"Angular ng-repeat: Restrict all items from being interacted with, except

I have a collection of items, each wrapped in a div element. I am trying to display only the first item as enabled while disabling the rest. AngularJs angular.module('example', []) .controller('myCtrl', function Ctrl($scope) { $sc ...

javascriptjqueryangularjs

What is the best way for a parent process to interrupt a child_process using a command?

I'm currently in the process of working on a project that involves having the user click on an 'execute' button to trigger a child_process running in the backend to handle a time-consuming task. The code snippet for this operation is shown b ...

javascriptnode.jstypescriptchild-process

The troubleshooting of compatibility issues between TailwindCSS and HTML Input and Button tags

Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with ...

htmlcssbootstrap-4next.jstailwind-css

Randomly order the vertices and incident polygons for three.js fill color on a face

Recently, I delved into learning three.js and am eager to figure out how to fill in the face color after creating a polygon based on randomly given vertices. Can anyone guide me on how to achieve this? var scene = new THREE.Scene(); var camera = new THREE. ...

javascriptthree.js3dpolygonvertex

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Launch a new Windows form upon clicking an HTML button using DotNetBrowser

I attempted to open a Windows form using the DotNetBrowser control with specific HTML content as shown in the code below. Upon clicking a button on the HTML page, I want to hide the loaded form and then display the second Windows form. Here is the C# cod ...

javascriptc#dotnetbrowser

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with an ...

htmlcsshyphenationcss-hyphens

Having trouble disabling JavaScript with Selenium

I'm attempting to disable JavaScript through the Selenium profile when launching a browser. This method has worked in the past, but after updating my Selenium/Firefox versions, I am encountering difficulties. profile = webdriver.FirefoxProfile() ...

javascriptpythonfirefoxselenium

Struggling with integrating API response formatting in React and updating state with the data

This is the content found in the file 'Search.js' import React, { Component } from 'react'; import * as BooksAPI from './BooksAPI' class Search extends Component{ constructor(props){ super(props); this.state={ ...

javascriptreactjs

What is the best way to switch between displays within an if-else statement?

I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears. HTML <p class="reme"> <a href="#" ...

jqueryhtmlcssfont-awesome

Tips for pinpointing parent elements within a group of various sub child elements

CSS - <div class="windows" id="window'+divCount+'"> <p id="windowName'+divCount+'"></p> <p id="para'+divCount+'">Source</p> </div> <div cla ...

javascripthtmljquery

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

javacssseleniumcss-selectors

Tips for Using AJAX and JavaScript to Save an XML File

My current task involves attempting to insert an element into an XML file. Upon inspecting the program with a debugger, I noticed that the element is successfully added to the XML file. However, when I stop the program from running, the changes are not sav ...

javascriptajaxxml