▼
Streaming live at 10am (PST)

Hamburger icon to the word "menu"

Design help General
#1

I’m wanting to change the hamburger icon that I currently have for my menu to the word menu instead. How can I translate that menu functionality and get rid of the icon with the word instead?

https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

#2

Hey @angierose,

Simply add in a text element under the menu block and style it accordingly. :slight_smile: You can put just about anything inside of the menu button. If you send over a read-only link I can send you steps on how to do that. :slight_smile:

1 Like
#3

Just out of curiosity - why do you not want the hamburg?

#4

Hey @Waldo_Broodryk

Here it is: https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

#5

@Matt_g, I’m having to be more ‘intuitive’ with my design so that people who don’t know what a hamburger menu is will have something more definitive instead.

1 Like
#6

Just drag and drop the text underneath the menu icon, type in menu, then style it and the nav appropriately. It looks like you’re missing heights on your navigation and elements within it.

Try that and let me know if you have any questions.

The main activator is the “Menu Button” which will open or close your menu :slight_smile: anything can be inside of that box from images to text and more. :smile:

Let me know if you need screen shots and I can provide those :slight_smile:

#7

I hear ya. Did you receive some feedback that people were confused? I find the hamburger to be pretty globally accepted and understood (especially when used in a standard location). Looking at most major sites/apps they all use it.

I am not saying you shouldn’t make your change, just curious.

#8

@Matt_g @Waldo_Broodryk

Just played with it and we’re just going to leave the hamburger icon. “menu” just looked so out of place on mobile devices. We’re going to just have a call out in our content to click the hamburger icon to load the menu.

Thanks for all your help and input!

#9

The “hamburger” vs “menu” vs neither but use words seems to be becoming a polarizing topic with designers and sometimes with clients. There are articles/data supporting not hiding navigation is better other supporting using it offers a cleaner more routine and simplistic user experience.

#10

I typically put the word “MENU” underneath the icon in smaller text to span the width of the icon. :slight_smile: Thoughts there?

:smile:

Waldo

2 Likes
#11

Just added it and waiting on feedback :smile:

#12

Depending on the amount of options in the menu, displaying it on the mobile is really not an option without taking over the screen. IMO (and that’s all this is) the hamburger is now common enough that the vast majority of users understand what it is. All of the big players (Google, Apple, Microsoft, Webflow) utilize the hamburger for displaying the menu. I am sure they have done all the research for us :smile:

#13

It certainly can’t hurt, I just really wonder if it’s needed. Time for some A/B testing :smile:

1 Like
#14

@angierosie,

Not to be picky, but is there a reason the paragraph is aligned this way? Image below:

Pasted image1064×611 137 KB

#15

I guess because the image right next to it didn’t load for you.

Screen Shot 2015-09-03 at 1.06.26 PM.png1004×763 458 KB

#16

It is working now. Very nice site.

Thanks,
Sean

#17

I do the same.

Although it’s widely known to “us”, generations that don’t recall life without the Internet need as much help as designers can give them.

#18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.