how to change hamburger icon in brooklyn to say Menu

Daniel_Barna
New Member
6 0 0

Hello,

 

in mobile view in Brooklyn, the menu collapses into a hamburger icon. I want to change the hamburger icon to say the word "Menu" next to it. 

For example the minimal theme does this by default, not sure why brooklyn doesn't have it.

Please help.

Thank you.

0 Likes
Isabeau1
Shopify Staff
Shopify Staff
42 0 5

Hi Daniel!

In your admin, head to Online Store > Themes and in the top right of the theme, there should be a "..." button. Click that and then choose "Edit HTML/CSS".

Open up the theme.liquid file, search for this section of code: 

<span class="icon icon-hamburger" aria-hidden="false"></span>

and replace it with

<span class="icon icon-hamburger" aria-hidden="true"> Menu </span>

That should add the word Menu beside the hamburger icon and look something like this: 

For Shopify created themes like Brooklyn though, you can also always reach out to support@shopify.com for a hand - we would be happy to try and help!

Cheers

Isabeau

0 Likes
Stuart3
New Member
3 0 0

Hi Isabeau

I have the same request in Brooklyn but I do not see that line of code in the theme.liquid file?

the nearest i can find is: 

div class="drawer__close">
          <button type="button" class="icon-fallback-text drawer__close-button js-drawer-close">
            <span class="icon icon-x" aria-hidden="true"></span>
            <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span>

 

Any help please 

Stuart

0 Likes
DaggaMx
New Member
6 0 0

Hi! I have the same issue, I cant find that line of code in the theme.liquid. Perhaps you can give us an updated answer for this?

0 Likes
Flores
New Member
4 0 0

Well, i did this some time ago for my other shop that was made on Debut theme.. i just started another one with Brooklyn theme.

The answer above is incorrect, what you actually need to do is, go to theme.scss.liquid, scroll until bottom and paste this code..  

@media only screen and (max-width: 749px) {
.site-nav__link--burger {
position: relative;
padding-left: 0px;
padding-right: 0px;
top: -10px;
&::before {
position: absolute;
content: "MENU";
bottom: -22px;
left: 2px;
right: 18px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}
}
}


You can move the text MENU by changing the bottom, left, right pixels. Also font size and letter spacing. And you can add top too if needed. This will show up only for mobile  

Hope it works! (it did for my shop just now haha)

0 Likes
Flores
New Member
4 0 0

check my reply

0 Likes
taylormcgee
Explorer
56 2 9

it showed menu but still shows the 3 lines I want to complete remove that! 

0 Likes
Flores
New Member
4 0 0

mehh idk

0 Likes