I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images – one for the hamburger icon and another for the cross, each assigned to a separate class.

Site URL:"https://9q49gu54zvkaspm1-18691129395.shopifypreview.com/"

I would really appreciate some assistance on this matter.

if($('body').hasClass(".show-mobile-nav"))
{
  $('img.close').hide();
} 
else($('body').hasClass(""))
{
  $("img.open").show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is the code snippet that I have attempted:

javascriptjavajquerycss

Answer №1

You may want to consider implementing a solution similar to this. Create a span element and use ::before and ::after to generate the other two bars.

Check out this CodePen for reference

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 // rest of the CSS code here...

<nav>
  <h3 class="logo">Your Logo Here</h3>
  // HTML code for navigation with mobile responsiveness
</nav>

Answer №2

Here is the solution:

if($('body').hasClass(".show-mobile-menu"))
{
  $('img.close-button').show();
  $("img.open-button").hide(); // don't forget to toggle the other element too
} 
else if($('body').hasClass(""))
{
  $('img.close-button').hide();
  $("img.open-button").show(); 
}

Make sure to place this code inside a function that is triggered on page load and button click events.

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

Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it? My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change. ...

htmlcsstransition

Elements of Data Pagination in Vuetify Data Tables

My data-table is filled with thousands of data inputs, so I am using the default Vuetify pagination to display only 5, 10, or 25 items at a time on the table. However, I am in need of a way to determine which data is currently visible on the table. For ex ...

javascriptvue.jsvue-componentvuetify.js

The AngularJS ng-repeat filter {visible: true} does not respond to changes in properties

var myApp = angular.module('myApp', ['infinite-scroll']); myApp.controller('DemoController', function($scope, $timeout, $rootElement) { $scope.$rootElement = $rootElement; $scope.$timeout= $timeout; $scope.init = ...

javascriptangularjsangularjs-ng-repeat

Selecting an item with Material UI AutoComplete now automatically clears the value

After making a selection, I want to clear the value in the input field immediately. Currently, the value is cleared on blur but not upon selection. <Autocomplete disabled={showTextField} className="center-vertically" options={listOfDependencies ...

javascriptreactjsmaterial-ui

Arranging an array of objects in typescript with elements implicitly having an undefined type

Currently, I am facing a challenge where I need to sort an array of objects within a function. The catch is that the function receives the key as a parameter, making it unknown: export interface ProductsList { id: boolean nome: string qtde: number ...

javascriptarraystypescriptsortingtypes

Exploring the intricacies of JSON object retrieval

I'm currently working on a form that allows users to submit address details for a selected location. However, before submitting the form, I want to give the user the ability to preview the address that will be sent. The addresses are stored within a J ...

javascriptjson

Tips for efficiently waiting for the outcome in a unified function for multiple callbacks within node.js

Perhaps the question title is not the most appropriate, but let me explain what I am trying to achieve in my code // First Callback Function connection_db.query(get_measure_query,function(err,user_data1){ if(err){ // throw err; ...

javascriptnode.jsfunctionasynchronouscallback

Creating an image slideshow with a looping JavaScript array: Step-by-step guide

One issue with the program is that when it runs, only the last array value image is displaying on the screen while the other images are not. Below is the HTML code: <img id="mg" alt="image not found"> And here is the JavaScript code: var images=[ ...

javascripthtmlcss

JS call for Bootstrap 5 collapse toggle not functioning as expected

I'm exploring the use of JavaScript to display or hide a collapsible element without toggling between the two states. In other words, I want to prevent the toggle functionality. According to the information provided in the documentation at https://ge ...

javascripttwitter-bootstrapbootstrap-5

Unable to display image in jqGrid binary format

In our system, we use a standard function to retrieve images stored as binaries in the database, and this function works seamlessly throughout the entire system. However, when implementing jqGrid, I encountered difficulties using the existing structure as ...

javascriptjqueryjqgrid

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

I have implemented Bootstrap validation for the other input fields in this form by using the 'required' attribute. However, for these two specific fields, if at least one is not empty, then the form should be submitted. <form class="needs ...

javascripthtmlvalidationbootstrap-5

Choosing one item from an array to showcase in a view [Angular]

I've previously inquired about this issue without success. My current challenge involves a store app created with AngularJS. I am trying to implement a feature where clicking on an item will open it in a separate "item" view, displaying only the info ...

javascripthtmlarraysangularjs

Extracting Data from JSON Using Vue.js

I am facing an issue with extracting data from a JSON file using Vue.js. Below is the HTML and JSON data along with the script. Any help would be appreciated. <!DOCTYPE html> <html> <head> <title>Vu ...

javascripthtmljsonvue.js

Inspect the data attribute and modify the class

I am looking to determine if a data attribute has a specific value and then update the class associated with it. For example, in my HTML code: <li class="country active" data-country-code="ca"><div class="flag ca"& ...

javascriptjqueryhtml

CSS - Issue with aligning image captions

I created an HTML snippet that has the following structure: <div class="large-4 columns"> <div class="promo-box"> <a href="#"> <img src="/our-projec ...

htmlcss

What is the best way to convert a List of objects to JSON using a dynamic variable?

I have a need to serialize a list of objects in a specific way: Imagine I have the following C# class: public class Test { public string Key; public string Value; } List<Test> tests; When I serialize this list (return Json(tests.ToArray()) ...

javascriptc#jsonserializationasp.net-mvc-5

Load Vue 3 components dynamically using a string-based approach

Exploring ways to dynamically load components based on a string input. Here is an attempt at achieving this: <component v-for="component in components" :is="eval(component)" /> However, this approach does not yield the desired r ...

javascriptvue.jsvuejs3

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Evaluating string combinations in JavaScript using valid comparisons

After choosing values on the screen, two variables store their value. var uval = '100'; var eval = '5'; There are 2 combinations with values: let combination1= 'u:100;e:1,4,5,10' let combination2 = 'u:1000;e:120,400,500, ...

javascriptarraysreactjsangularstring

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss