Experiencing difficulty with the toggle menu on an HTML/CSS website. Unable to access the menu when hovering over the hamburger icon on the right side

I am experiencing an issue with the toggle button in the menu when the screen size is max-width = 1200px. Specifically, when I toggle the button, nothing appears. Can someone please assist me?

I have included Bootstrap 4.3 in my HTML script. The menu that I want to add to the toggle button I created is positioned below it in the HTML script. I need help resolving this.

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/*********************************
*** Marquee
*********************************/
.marquee {
  background: #2a4563;
  padding-top: 4px;
  padding-bottom: 3px;
  /*border: 1px;
    border-left: 10px;
    border-style: solid;
    border-color: #FF5733 ;*/
}

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!-- Home Style Sheet -->
  <link rel="stylesheet" href="css/style.css" />
  <!-- Font Awesome JavaScript -->
  <link href="https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville|Montserrat|Quicksand|Raleway|Slabo+27px&display=swap" rel="stylesheet">
  <!-- Font Awesome JavaScript -->
  <script src="https://kit.fontawesome.com/0412137e5c.js" crossorigin="anonymous"></script>
  <!-- Optional JavaScript -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

javascripthtmlcssbootstrap-4media-queries

Answer №1

The approach used in this code snippet involves utilizing a form checkbox to implement toggling functionality, which is not the recommended way of using the HTML tag. A more appropriate method would be to incorporate JavaScript logic into the mobile-menu-2 div element by attaching a click event handler to it.

HTML

<div class="mobile-menu-2 col-2 d-flex my-auto">&#9776;</div>

JS

var mobileMenu = document.getElementsByClassName("mobile-menu-2")[0];
//Add click event with a callback function to toggle class style
mobileMenu.addEventListener("click", toggleMenu);

function toggleMenu() {
  var activeMenu = mobileMenu.classList.contains("active");
  if (!activeMenu) {     
    mobileMenu.classList.add("active");
  } else {
    mobileMenu.classList.remove("active");
  }
}

This script will dynamically add or remove an 'active' class to the div element. Consequently, you can style the targeted class in your CSS to reflect the desired appearance for the interactive menu.

Example CSS

.mobile-menu-2 {
  background-color: red;
}

.mobile-menu-2.active {
  background-color: green;
}

If you wish to apply the same active state class to another div element, simply target the new element using 

document.getElementsByClassName('something')[0]
and manipulate the class accordingly.

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

The color type input is not responding to the onChange event

I have been searching a lot and exploring answers on Stack Overflow, yet I have had no luck. I am trying to retrieve the color value when the color is changed in an input field. Here is the code I am using, could you please assist me in finding out why it ...

javascriptjqueryhtmlcss

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would ...

jquerycssjquery-animate

AngularJS html tags are displaying instead of processing

One of my variables looks like this: $scope.someVar= "Some<br>text<br>here"; When I display it in my HTML file using {{ someVar }}, it shows up like this: Some<br>text<br>here But I really want it to look like this: Some t ...

htmlangularjsrendering

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

The data received from the frontend is being replicated in the backend, causing duplication issues in a React

Whenever I click the button labeled onClick, it triggers the transmission of data (both time and ID) to the backend. The issue at hand is that the backend seems to be receiving the data twice instead of just once. On inspecting req.body, it becomes eviden ...

javascriptnode.jsreactjsrest

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console! I encountered an unusual bug where the Bootstrap nav-tab functionality ...

javascriptjqueryhtmlcss

What's causing ng-show to malfunction in IE11 on AngularJS?

I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...

javascriptangularjshtmlcssangularjs-directive

How come I am receiving the E11000 error from Mongo when I have not designated any field as unique?

Encountering an issue while attempting to save the second document to MongoDB Atlas. The error message reads as follows: Error:MongoError: E11000 duplicate key error collection: test.orders index: orderId_1 dup key: { orderId: null } Despite having no un ...

javascriptnode.jsmongodbmongoosemern

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

javascriptangulartypescriptangular-material

Customize the color of the hamburger icon in Vue Bootstrap

I am struggling to change the color of the Vue Bootstrap Hamburger navbar-toggler-icon to white. Despite trying numerous code combinations, I have not been successful. Each time I load the app, the CSS defaults back to the original bootstrap URL. Do you ha ...

cssvue.jsbootstrap-4hamburger-menubootstrap-vue

encountering trouble with reading pathname in React Router DOM due to an error

App.jsx import { useState } from 'react'; import './App.css'; import NewsContainer from './Components/NewsContainer'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { const [mode, ...

javascriptreactjsreact-routerreact-router-dom

Ways to execute a script from termly on NextJS using JSX

I've been utilizing termly to assist in creating legal terms for a website I'm developing. They provided me with some HTML containing a script, but I am struggling to get it to execute on a page in JSX. I attempted to use both Script and dangerou ...

javascriptreactjsnext.jsjsx

During the process of converting documents to HTML, any graphics or shapes may not be accurately translated into HTML format

I am looking for a way to display a doc file in a dialog box on a browser. To achieve this, I converted the doc file into an html file successfully. However, I encountered an issue when the doc file contained graphics or shapes - these elements were not co ...

htmlapache-poidoc

Shift attention to the subsequent division after a correct radio option or text input has been submitted

I need to enhance the user experience on my form. When a user interacts with specific elements like hitting enter in a text input or clicking a radio button, I want to automatically focus on the next "formItem" division. My form structure is organized as ...

javascriptjqueryhtmlangularjsangular-material

Is there a possibility of encountering an endless update loop within a component's render function?

Hello! I am a beginner in Vue.js and I have encountered an issue with my function. Instead of increasing my variable to 1 as expected, it is increasing it to a random number every time. The console is displaying the following error message: "You may hav ...

javascriptvue.js

Exploring the power of nested routes in React Router 4: accessing /admin and / simultaneously

I'm encountering an issue with nested routing. The URLs on my normal site are different from those on the /admin page, and they have separate designs and HTML. I set up this sample routing, but whenever I refresh the page, it turns white without any ...

javascriptreactjsecmascript-6react-router

Is it possible to display Google pie charts when clicking on text or an image?

Having trouble setting up a link that triggers an onClick() action to generate a Google pie chart? Check out this example on JSFiddle. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piech ...

javascriptphpgoogle-pie-chart

The function of cookieParser() is causing confusion

Having an issue that I've been searching for answers to without success. When using app.use(express.cookieParser('Secret'));, how can we ensure that the 'Secret' is truly kept secret? I'm feeling a bit lost on this topic. Is ...

javascriptnode.jscookiesexpress

Acquire Formik Validation for the Current Year and Beyond

How can I ensure that the input in Formik is restricted to the currentYear and later years only? const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Please select an expiry year') .min(4, `Year format must be grea ...

javascriptreactjsmaterial-uiformikyup

Creating an object using a string in node.js

I have a string that I am sending from AngularJS to NodeJS in the following format. "{↵obj:{↵one:string,↵two:integer↵}↵}" //request object from browser console To convert this string into an object and access its properties, I am using the serv ...

javascriptangularjsjsonnode.jsstring