Debut theme - Change the menu icon on mobile version

Store Design
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
Tiendaenlinea_0-1604041289780.png405×343 18.3 KB

Thanks in advance

2

Hello There,

Kindly follow the below given steps:-

  1. Find {% include ‘icon-hamburger’ %} in header.liquid

  2. Replace {% include ‘icon-hamburger’ %} with MENU

  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.

2 Likes
3

@ZestardTech maybe 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:

  

        

           
![tartar-logo-small.png?7707147882606051233|100x100](upload://nKOkIaKjyTCxNwg0bCO6gTL6vSt.png)

           
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              
                {% include 'icon-login' %}
                {% if layout_customer_account %}{{ layout_customer_account  }}{% else %}{{ 'layout.customer.account' | t }}{% endif %}
              
            {% else %}
              
                {% include 'icon-login' %}
                {% if layout_customer_log_in %}{{ layout_customer_log_in  }}{% else %}{{ 'layout.customer.log_in' | t }}{% endif %}
              
            {% endif %}
          {% endif %}
          
          {% unless linklists[section.settings.main_linklist] == blank %}
            
          {% endunless %}
          
          
            {% include 'icon-cart' %}
            {{ 'layout.cart.title' | t }}
            

              {{ cart.item_count }}
              {{ 'layout.cart.items_count' | t: count: cart.item_count }}
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 :slightly_smiling_face:

1 Like
5

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

6

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

1 Like