Add the word "Menu" next to Hamburger Navigation Icon

New Member
12 0 0

I'm have problems with the older generation of customers not understanding they need to click the hamburger icon to open the navigation menu.

How would I go about adding the word Menu next to the icon?

My site is badgepig.co.uk

Thanks for your help

0 Likes
Highlighted
Navigator
1137 0 123

Look in theme.liquid or possible a head.liquid file using the Theme Editor. Can vary based on theme.

Find: <span class="drawer-toggle"></span>

You can put "Menu" right after. However it won't be a link. You can put "Menu" within the span but you need to change the formatting. I am not best to ask on that score. Maybe a span within that uses STYLE="font-size:80%" or something.

Hope that gets you a start.

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Highlighted
Shopify Expert
10006 116 1818

If you add the word menu in the span, wrap that word in an another element as well. That should let you target it with css. eg:

<!-- from this: -->
<span class="drawer-toggle"></span>

<!-- to this: -->
<span class="drawer-toggle"><i>menu</i></span>

From there you could do something hacky like so:

.drawer-toggle i {
  font-size: 10px;
  position: absolute;
  top: -20px;
  font-style: normal;
  font-family: sans-serif;
  left: -1px;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
12 0 0

Guys, thank you so much, I removed the icon all together in the end to give the header a better balance.

Hey Jasonwhile I have you attantion can I be cheeky & ask you for help on another problem with this theme?

When the drawer is open, unless you make a selection in the navigation menu you have to close the drawer by clicking the cross icon on the top right. How could I code the drawer to also close if you click anywhere outside of the drawer area?

Thanks for your help in advance, Mark

0 Likes
Highlighted
Tourist
8 0 1
.drawer-toggle i {
  font-size: 10px;
  position: absolute;
  top: -20px;
  font-style: normal;
  font-family: sans-serif;
  left: -1px;
}

Where do I place this? Thanks! 

0 Likes