When browsing certain websites using smartphones, tablets and other mobile devices you might have seen the navigation menu being hidden behind an “hamburger” icon comprised of three horizontal lines on top of each other, which must be clicked before the user can see the navigation links.

Shopify is no exception and if you feel that icon is bland and not particularly intuitive, this easy to follow tutorial will teach you how to add a simple “menu” text right below it on your Shopify's free theme.

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Part 1: Adding the custom text

1. From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code > Sections > header-drawer.liquid.
   
   
2. If you can't find the header-drawer.liquid file, look for the header.liquid file instead.
   
3. In the header-drawer.liquid file, press CTRL + F to open the search bar (or CMD + F on Mac) and paste in the following:
   
   {% render 'icon-hamburger' %}
   
   This will take you to the following block of code:
   
   
   
4. Now all that you have to do is remove the code inside the red square and replace it by the following:
   
   
   
   The result will look like this:
   
   
   
   The word underlined in red is the word that will be displayed below the hamburger icon during mobile navigation.
   
   In this tutorial we're using “menu” as an example but you're free to replace it by any word of your choosing, such as “nav”, “navigation” or “links”. Once you have picked your preferred word click “save” on the top right corner of the screen and we'll move on to customization.
   
5. You can customize the values as per your wish:
   Menu = word that will show up below the hamburger menu
   #000000 = text color
   10px = vertical position of the hamburger menu
   14px = text size
   11px = top distance from word to hamburger menu

Part 2: Understanding the customizations in more details

1. In the code you copy and pasted from above, there is some CSS which can be used to modify your icon and the text you just created. If you think they look good the way they are right now, then you're done and don't need to modify any more code!
   
   If you'd like to further customize them, the following steps will teach you how to modify the CSS values. Note than when this guide points to a line, it refers to the line in the code you copied above, not the line from your store's code you pasted it in.
   
   
2. First off you might need to align the icon with the rest of your navigation menu, that's easy to do: just increase the number from line 11 to move the whole icon down or decrease it to move it up. Make sure not to leave any empty space between the number and the “px”.
   
   
3. You can change the color of the icon with the code in line 15 which has been set by default to black. You can replace it by directly naming a color such as blue, an rgb code like rgb(0, 0, 255) or an hexadecimal code like #0000f7. Either of these examples will result in the same shade of blue, it's up to you which method you're more comfortable with!
   
   
4. Finally, you can change the size of the text you created by changing the number in line 20, again remember to leave no empty space after the number and before the “px”. You can also change its color in line 21, using the same method described in step 3 above. Once you're done, don't forget to click the “save” button on the top right corner of the page!

Conclusion

You're done! You now have a custom hamburger icon for mobile navigation that should look something like this:





If something didn't go as intended or you'd like further customization options, let us know at ezfycode@gmail.com and we'll give you a quote.

You may also like

Here are some other tutorials you may be interested in. They work with “Dawn” plus all Shopify's free themes (Craft, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher & Sense):
– Arrows & vertical thumbnails for Dawn's product pages
– Dawn lightbox: responsive images, slider and arrows
– Improve your website's safety: block right click, image copying and more