Mobile Menu- Masonry Theme- Changing The 3 Lines

Store Design
1

Hello,

I would like the 3 lines to change to say menu instead When on the mobile, or even menu next to it, so it’s very clear.

Can that be done? If so any advice on how is appreciated.

Thank you

2
  1. From your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
  2. Open the theme.scss.liquid file under Assets folder.
  3. Add the following code at the end of the file:

css
.site-nav--mobile-toggle { .icon-nav-menu:before { content: "Menu"; } }

 
  1. Save the changes and preview your website on mobile to see the updated menu text.

Alternatively, you can also use the following code to display “Menu” next to the icon:

css
.site-nav--mobile-toggle { .icon-nav-menu:before { content: ""; background-image: url("//cdn.shopify.com/s/files/1/0022/5642/t/9/assets/menu.svg"); background-size: contain; display: inline-block; width: 20px; height: 20px; margin-right: 10px; } .site-nav--mobile-toggle__label { display: inline-block; vertical-align: middle; } }

 

This will display the “Menu” text next to the icon on the mobile menu. You can adjust the width, height, and margin of the icon as needed.

3

Hello, I dont have theme.csss.liquid under Assets only theme.js or styles.css.liquid. I tried adding in both but it doesnt work.

2.jpg
2.jpg748×2283 85.1 KB

4

Write .css in search and you will see all css file or it would sccc

5

There is no .css

1.jpg
1.jpg806×1550 48.3 KB

Maybe theme. liquid located in Layout?

6

styles.css.liquid it is , add code there it is the main CSS file for your theme

7

I copied the code that you said at the end of the styles.css.liquid but it didnt change anything.

1.jpg
1.jpg3150×1260 190 KB

Shop name is www.saboco.ro