The toggle function for the hamburger icon is currently malfunctioning

I am facing an issue with the hamburger icon on my website. The toggle functionality associated with it is not working properly. Even though I have a class named change-1 that should be toggled upon clicking the icon, it is not happening. There are no error messages showing up in the console either. Can anyone help diagnose the problem in this code?

function Main() {}
Main.prototype = {
  // Function to initialize preloading
  initPreloading: function() {
    window.addEventListener("load", function() {
      document.body.classList = "loaded";
    });
    document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
  },
  // Function to create particle ribbons
  particleRibbons: function() {
    // Code for creating particle ribbons
  },
  // Function to initialize miscellaneous tasks
  initMisc: function() {
    window.addEventListener("resize", this.particleRibbons);
  },
  // Function to handle hamburger icon click event
  navIcon: function() {
    $(".hamburger-icon").on("click", function() {
      $(".one").toggleClass("change-1");
    });
  },
  // Function to initialize everything
  init: function() {
    Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
  }
};
var Main = new Main;
Main.init();

/* CSS code snippet */

@media (max-width: 768px) {
  /* CSS code specific to smaller screens */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="loading">
  <div class="site-wrapper">
    <div class="site-main fullpage">
      <section data-id="hero" class="block hero" style="margin-top:0;padding:0">
        <div class="hamburger-icon">
          <div class="burger one"></div>
          <div class="burger tikki"></div>
          <div class="burger two" style="margin-bottom: 0;"></div>
        </div>
        <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
        <div class="block__content vertical-align-helper text-align-center">
          <div class="vertical-align-middle">
            <h1 class="name">Chirag <span>Bhansali</span></h1>
            <h3 class="subtitle">Front-End Web Developer</h3>

          </div>
        </div>
      </section>

Answer №1

Make sure to set the position: relative; property for your hamburger and adjust the z-index accordingly

function Main() {}
Main.prototype = {
  initPreloading: function() {
    // Your JavaScript code here
  },
  particleRibbons: function() {
    // Your JavaScript code here for creating particle ribbons
  },
  initMisc: function() {
    // Your JavaScript code here for other miscellaneous initialization
  },
  navIcon: function() {
    // Your JavaScript code here for navigation icon functionality
  },
  init: function() {
    // Your JavaScript code here to initialize the Main object
  }
};
var Main = new Main;
Main.init();


// burger animation

//$(".hamburger-icon").on("click", function(){
//    $(".one").toggleClass("change-1");
//})
html {
  // Your CSS code here
}

body {
  // Your CSS code here
}

// More CSS code for different elements
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="loading">
  // Your HTML code here

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

When the icon is clicked using `ngClick`, we are triggering the `refresh` event, but unfortunately, it is not functioning as expected

Currently, I am utilizing Angular and jQuery float to create a canvas graph. The graph itself is composed of canvas elements. The issue at hand involves the desire to redraw the canvas upon clicking on a specific icon. The click event handler in question ...

Utilizing PHP variables and CSS to dynamically adjust the background color according to various events triggered by SQL data

Hopefully my explanation is clear. <?php $rx_event_color = $rx_image_color = '#FF0000'; if ($a['rx_event_exists'] == 1) { $rx_event_color = '#00FF00'; } if ($a['rx_scanned'] == 1) { $rx_image_color = '#00FF ...

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

Problem with JavaScript in Internet Explorer 8

To ensure a consistent bottom background at all times on the page, I devised a method to determine whether or not the bottom part needed to be pushed down based on the window height and main content height. However, I encountered an issue when the content ...

jQuery can be used to obtain the label for a checkbox with a particular value

Currently, I am facing an issue with retrieving the label for a checkbox using jQuery. Let me provide you with the relevant HTML code: <div class="checkbox"> <label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label ...

JSP generates unconventional HTML output

I'm encountering a strange issue with one of my JSP pages. It seems like the HTML is not being fully rendered. The output looks like this: <html> ... <table> ... </table> <div id= So, the last line is exactly what ...

Selenium's xpath feature is designed to target only the elements that are currently visible

When using Selenium xpath, it only matches visible elements on the HTML page. Even though there are many other elements present but not visible, the xpath will only return those that are currently visible. This is in contrast to checking the xpath in the ...

Utilizing jQuery to Detect TAB Key Press in Textbox

I need to detect when the TAB key is pressed, prevent the default action from occurring, and then execute my custom JavaScript function. ...

What could be causing the CSS transition to fail when the menu button is clicked?

After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...

Designing a MongoDB document structure that includes subdocuments with similar properties

Currently, I am in the process of developing a referral feature and I am relatively new to MongoDB. My main issue lies in figuring out how to construct a document that contains multiple similar subdocuments - specifically, 4 email addresses. The challenge ...

Is it possible to obtain a user's public URL using the Facebook API in version 2?

In version 1, it is possible to obtain the user's public link by using the following endpoint: /v1.0/me function testAPI() { console.log('Welcome! Fetching your information....'); FB.api('/me', function(response) { ...

Avoid transitioning to a different page using Vue-router

I have recently ventured into the world of Vue.js and my current project involves fetching data from an API, implementing pagination, and creating a detailed view for each post upon clicking. I have successfully implemented the pagination feature, however, ...

What measures can be taken to guarantee that a user is only able to delete designated records?

When it comes to writing SQL commands directly, it's simple to specify which records to delete using identifiers like ID. However, when dealing with webpages that contain a list of links pointing to different records (with the ID embedded as a query ...

Attempting to transmit a ng-repeat object to a personalized filter function

Objective: The goal is to enable a user to input the name of a course into the search field and view a list of students who are enrolled in that course. Data Models: course (contains course name and code) student (holds a list of courses they are regist ...

Developing web applications with Asp.Net Core 5.0 and integrating jQuery within Partial Views

I have implemented a partial view that utilizes Ajax to display User Data on the Main View. The script is executed from the main view. My next step is to include a 'delete' button in the results displayed within the partial view, but I am facing ...

I am attempting to extract data from the website by utilizing the correct CSS selectors, however, I continue to receive results suggesting that the element is not present

Struggling to create a bot for my own services, but encountering crashes when trying to run it. login_button = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "//div[@class='loginRegisterButtons sb- ...

Introduce a pause using the raycaster function

When my raycaster intersects an object for 2 seconds, I want to update the object's texture. I attempted to use the clock function, but I am unsure of how to properly implement it. var clock = new THREE.Clock(); clock.autoStart = true; var inters ...

Executing a separate function after each iteration of an ajax call within a loop using Jquery

I am faced with a situation where an ajax function must be run inside a loop that depends on the array's size. How can I execute another function after the ajax call is completed and outside the loop? Is this achievable? Below is the function: funct ...

Error: React js app has crashed. Currently waiting for file changes before restarting

I recently began using nodemon and started working on a small sample project. However, when I try to launch the server using sudo npm run dev, I encounter the following error: [nodemon] app crashed - waiting for file changes before starting... The error ...

Using the Tailwind CSS framework in combination with Vue's v-html

My vue component is designed to accept a prop of raw HTML, which originates from a wysiwyg editor utilizing tailwind classes for styling - similar to our vue app. The issue arises when using v-html="responseFromAPI" in my component, as the raw H ...