Debut theme - Change the menu icon on mobile version

Solved
Tiendaenlinea
Tourist
18 0 1

Hi, im using the debut theme.

how can i change de menu logo on mobile version or instead add the text "menu" to make more visible to users 

 

Tiendaenlinea_0-1604041289780.png

Thanks in advance

 

 

0 Likes
Pallavi
Shopify Expert
2366 396 512

This is an accepted solution.

Hello There, 

 

Kindly follow the below given steps:-

1) Find  {% include 'icon-hamburger' %} in header.liquid

2) Replace  {% include 'icon-hamburger' %} with <span class="mobile-nav--open menu-item">MENU</span>

3) Add the below given css in theme.scss.liquid file

.mobile-nav--close {
.menu-item {
display: none !important;
}
}

 

By doing this you will remove the hamburger menu and will replace it with menu text. Kindly check once and let me know if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Elisaw
Explorer
62 2 6

@Pallavimaybe you can help me with this. I have my mobile nav working but when I open it, the close icon doesn't show, the hamburger icon is there when open and closed. This is my theme preview:

 

https://6kqouqm289bpyh9u-24792738.shopifypreview.com

 

and the code in header.liquid:

<!--MOBILE NAV-->  

<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 site-header__icon js-mobile-nav-toggle mobile-nav--open " aria-controls="MobileNav" aria-expanded="false" aria-label="Menu"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="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>
        </div>
</div>
0 Likes
mgmusik
Excursionist
17 0 4

Hey,

 

i did Step 1 and 2.

 

Why is Step 3 important? It worked after the first two steps.

".mobile-nav--close {
.menu-item {
display: none !important;
}
}"

 

Where should i placed this? BIG THANKS

0 Likes
Tiendaenlinea
Tourist
18 0 1

Hi Pallavi

The solution you posted a time ago, works fine, until yesterday, the text "Menu", dissapear.

i tried to change the code, and leave it the same as the original , but now the icon menu dont show in mobile version.

 

Can you help with this issue ?

Thanks in Advance

 

0 Likes
nicolobi
New Member
1 0 0

I have the same issue now....
the menu diseapear now.. impossible to show it ! 

0 Likes