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

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

React - Highcharts Full Screen dark overlay

I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality. The challenge I am facing is setting a fixed height for my charts while also enabling the option to view ea ...

javascriptcssreactjshighchartsreact-highcharts

Preserve a data point without causing any alterations

I am working with a device that continuously sends values until it is stopped. These values are then saved inside an array. deviceMonitoring( device2 ){ // In this function, I populate the arrayTimestamp and then copy the first value. this.arrayElement = t ...

javascriptreactjsreact-native

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

javascriptjqueryhtmlajax

Webpack has no issues building the files, however, the JavaScript fails to execute during runtime

I recently upgraded from Webpack v4 to v5, following the documentation and addressing any deprecation messages from the CLI. The build was successful, but when testing the application, I noticed that the JavaScript wasn't running and no errors were be ...

javascriptreactjswebpackbuildcompilation

Updating the parameters when clicking on each pagination button: A guide

Does anyone have advice on implementing pagination? I am currently working on loading a datatable with a few records initially. Once the page is loaded, I want to be able to click on pagination buttons like next or any pagination buttons to display a new s ...

javascriptangulartypescriptdatatablesangular-datatables

What is preventing this DIV from stretching to the full width of its children?

Why isn't my container DIV expanding to the width of the large table? <html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link ...

htmlcss

Issues have been identified with the capabilities of Vue's Mutations and Actions

My Index.js from the Store Folder import Vue from "vue"; import Vuex from "vuex"; import state from "../store/state"; import mutations from "../store/mutations"; import actions from "../store/actions"; Vu ...

javascriptvue.jsvuejs2vuex

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

I'm receiving a Reference Error stating that 'next()' is not defined, despite the fact that I have defined it in my JavaScript code. What could be causing this issue?

I have a javascript function called next() to process information and then call the function from HTML. However, my Firefox console is showing a ReferenceError: 'next' is not defined. I am aware that there is an error in my code, but I cannot pin ...

javascriptjquerydjangoajaxpython-3.x

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

cssrubyxmlxpathcss-selectors

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Is there a way to detect if the content of the fourth td overflows from the second td? I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing. What approach can be used to determine which td i ...

javascriptjqueryhtmlcss

Ways to tidy HTML/XML code?

Upon receiving a web service response, the data appears as such: <text>&lt;span class="TitleServiceChange" &gt;Service Change&lt;/span&gt; &lt;span class="DateStyle"&gt; &amp;nbsp;Poste ...

javascripthtmlxmlweb-servicesrest

Troubleshooting issues with the add-comment and remove-comment functionalities in a react-redux application

I'm working on a comment widget using react-redux. I've encountered an issue where, when I click on the add comment button, nothing happens. Also, when I try to delete a comment, I get an error saying that map is not a function even though I am p ...

javascriptreactjsredux

A dynamic modal window built with ReactJS

I am struggling to understand how to make my app function properly. There is a component called ContactAdd that should render the component ModalWindow when clicked. The ModalWindow component requires a parameter called isOpened={this.state.open}. How c ...

javascriptreactjsstate

Utilizing JavaScript to Incorporate Node Packages

Sorry for the basic question, as I am fairly new to web development and JavaScript. I am trying to utilize a package that I installed via npm called shopify-buy by following the instructions provided at: The package is located in my node_modules director ...

javascriptnode.jsnpmshopify

What is the best way to transfer the value of a slider from jQuery or JavaScript to a Python Flask application

Trying to implement a round slider that displays its value on the client-side webpage. Whenever the user adjusts the slider, the updated value needs to be sent to the server using Python Flask as the backend. I attempted to achieve this using jQuery and Aj ...

javascriptjquerypythonajaxflask

Using a variable as the text in a jQuery link

I'm having trouble with a simple variable - I want to use the variable as link text. Here's my code: var ReadMore = myvar; $(this).empty().html(subStr); $(this).append(' <a href="javascript:void(0);" class= ...

jquery

What steps can be taken to resolve the issue of Spring Boot not supporting the 'POST' request method?

I have developed an API using spring boot with dependencies such as spring web, JPA, jstl, and MySql. The API includes a Controller, Model, and Repository for performing CRUD operations. In addition to this, I have created a client to consume the API. When ...

javajqueryajaxspringspring-boot