Toggle in mobile nav (showing close icon when open)

Elisaw
Excursionist
40 1 4

Hello, I have set up a mobile nav for my shop which works fine. You open the nav with the hamburger icon and when the nav is open, I want the close icon to show so it is clear how to close the nav. Here is my code in my header file and the preview of the website:

https://ni4nci1bqcjei332-24792738.shopifypreview.com

 

 

<div class="grid__item small--one-half bg-black-mobile {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third{% endif %} text-right site-header__icons hidden-desktop2{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}" style="top: 0px;width:100%;">
        <div class="site-header__icons-wrapper">
           <a class="logo-mobile" href="/"><img src="https://cdn.shopify.com/s/files/1/2479/2738/files/tartar-logo-small.png?7707147882606051233" style="
    			text-align:  left;
    			float:  left;
    			height: 40px;
    			margin-top: 10px;">
           </a>
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="/account" class="site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{% if layout_customer_account %}{{ layout_customer_account  }}{% else %}{{ 'layout.customer.account' | t }}{% endif %}</span>
              </a>
            {% else %}
              <a href="/account/login" class="site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{% if layout_customer_log_in %}{{ layout_customer_log_in  }}{% else %}{{ 'layout.customer.log_in' | t }}{% endif %}</span>
              </a>
            {% endif %}
          {% endif %}
          
          {% unless linklists[section.settings.main_linklist] == blank %}
            <button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open " style="padding-right:20px; float: right;">
              {% include 'icon-hamburger' %}
              {% include 'icon-close' %}
              
              <span class="icon__fallback-text">{% if layout_navigation_toggle %}{{ layout_navigation_toggle  }}{% else %}{{ 'layout.navigation.toggle' | t }}{% endif %}</span>
            </button>
          {% endunless %}
          
          
        <a href="/cart" class="site-header__cart" style="">
           <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"></path></svg>
           <span class="visually-hidden">Einkaufswagen</span>
           <span class="icon__fallback-text">Einkaufswagen</span>
        </a>
        </div>
</div>

 

 

 

  <script>
    $( document ).ready(function() {
    //mobile menu
        $('.mobile-nav--open').click(function(){

          if($('.mobile-nav-wrapper').css('display') == 'none'){
            $(".mobile-nav-wrapper").css("display", "block");
            
          }
          else{ $(".mobile-nav-wrapper").css("display", "none");}
          
        });
       ('.icon-close').click(function(){
            $('.mobile-menu').addClass('hidden');
            $('#MobileNav').slideUp('slow');

        });

	});
    </script>

 

I need to solve this urgently, thank you so much for your help!

p.s. The nav is also only working from max-width: 1075px... also can't figure out why

0 Likes