Add text to the menu icon

nkthen · January 2016

Is it possible to use CCS to add text to the icon menu that is displayed on mobiles? Some of my clients do not know that the "3 lines" icon are actually MENU! If I can add text with word "Menu" beside the Icon could be good. I know I can have just text instead of menu but can I the text just beside the icon?

Albert · January 2016

Hi,

you can do this easily under Theme options > Responsive section. Inside Menu Button | Text field, please add the following content:

<i class="icon-menu"></i> Menu

nkthen · January 2016

Oh I see. I can add HTML tags. Thanks!

Albert · January 2016

You're welcome!

heleenve · January 2016

I was looking for this as well, Thank you!!!

nkthen · January 2016

OK, is it possible to have a border around the menu? I hope to make it look like a button so if I can have the CSS for border/background color/text color it would be great.

If not, a border CSS will be enough also.

Albert · January 2016

@nkthen Please send us link to site where you want to do this and we'll see if it's possible.

nkthen · January 2016

It's at this page: http://199.design

If you resize to mobile view, you'll see the menu.

Albert · January 2016

Ok. So to add border around this button, please use the following css:

#Top_bar a.responsive-menu-toggle span { border: 1px solid #FFF !important; }

nkthen · January 2016

The border is there but unfortunately the left border went to the edge of the screen, cutting it off. So do we move the icon to the right a bit?

Albert · January 2016

#Header a.responsive-menu-toggle.is-sticky { left: 30px !important; }

nkthen · January 2016

Thanks!

Albert · January 2016

You are welcome

mcoenradi · February 2018

Hello,

Can i place the tekst "Menu" at te right side of the menu icon.

I Already placed: <i class="icon-menu"></i> Menu in the Menu button field in Responsive.

Check here.

Bryan · February 2018

Hi,
sorry but we do not have such an option, you can try this css to make it in one line:

#Top_bar a.responsive-menu-toggle {
	width: 80px !important;
}

Add text to the menu icon

Comments