Shopify Question posted in
The Shopify help center can be found here.

Hi i want to change from hamburgur to cross on click of the menu – Shopify

Hi I am working on a Shopify website. i want the hamburger menu to change to cross on click, I have tried everything but it is not working. i have two different images one hamburger and another is cross. and I have given them two different classes as well

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

Please help

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 I have tried

Tags:

2

Answers


  1. 0

    You could try doing something like this. Just have a span, and you make the two other bars with ::before and ::after

    Here is a codepen

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
}

ul,
ol {
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
}

nav {
  color: white;
  background: #393e46;
  position: fixed;
  width: 100%;
  z-index: 999;
}
nav h3 {
  display: inline-block;
  margin: 0.5em;
}

.mobile-nav {
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  background-color: #393e46;
  padding: 1em;
  text-align: right;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}
.mobile-nav a {
  color: white;
  padding: 0.25em;
  font-size: larger;
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.mobile-nav-toggle {
  position: absolute !important;
  top: -99999px !important;
  right: -999999px !important;
}

.mobile-nav-toggle-label {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 99999;
}

.mobile-nav-toggle:focus ~ .mobile-nav-toggle-label {
  outline: 3px solid rgba(0, 172, 181, 0.75);
}

.mobile-nav-toggle-label span,
.mobile-nav-toggle-label span::before,
.mobile-nav-toggle-label span::after {
  width: 100%;
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
  transition: transform 400ms ease-in-out;
}

.mobile-nav-toggle-label span::before,
.mobile-nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.mobile-nav-toggle-label span::before {
  bottom: 7px;
  transition: opacity 250ms ease-in-out 400ms;
}

.mobile-nav-toggle-label span::after {
  top: 7px;
}

.mobile-nav-toggle:checked ~ .mobile-nav {
  transform: scale(1, 1);
}

.mobile-nav-toggle:checked ~ .mobile-nav a {
  opacity: 1;
  transition: opacity 150ms ease-in 350ms;
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span:before {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span {
  transform: rotate(45deg);
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span:after {
  transform: rotate(-90deg) translateX(7px);
}
    <nav>
  <h3 class="logo">Logo Here</h3>
  <input type='checkbox' id='mobile-nav-toggle' class='mobile-nav-toggle'>
  <label for='mobile-nav-toggle' class='mobile-nav-toggle-label'><span></span></label>
  
  
  <div class="mobile-nav">
  <a href="javascript:void(0)" class="mobile-nav-link">Home</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Features</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Pricing</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Resourses</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Contact</a>
</div>
</nav>
    Login or Signup to reply.
  2. 0

    This should work:

    if($('body').hasClass(".show-mobile-nav"))
{
  $('img.close').show();
  $("img.open").hide(); // remember to hide or show the other element as-well
} 
else($('body').hasClass(""))
{
  $('img.close').hide();
  $("img.open").show(); 
}

    Of course it should be a in function where it is called when the page is loaded and when the user clicks on the said button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search