?
Solved

Add the word "MENU" to hamburger navigation icon in wordpress

Posted on 2016-10-14
8
Medium Priority
?
367 Views
Last Modified: 2016-10-20
How do I add the word "menu" to the hamburger navigation icon on a site using wordpress?  The icon appears in tablet and cell phone views.
http://sheboyganseniorcommunity.com
0
Comment
Question by:nsitedesigns
  • 4
  • 3
8 Comments
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 41844445
Where do you want the word menu to be displayed?
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 41844447
personally I think everyone knows that the icon means menu and you touch it to display the menu.

but if you want to change the icon to the word Menu look for the looking code:

<div class="responsive-menu-icon"></div>

Open in new window


and change it to:

<div class="responsive-menu-icon"><strong>MENU</strong></div>

Open in new window


and if you want to remove the icon as well then change the following style which is in style.css

.responsive-menu-icon::before {
    content: "\f333";
    display: block;
    font: normal 20px/1 'dashicons';
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

Open in new window


to:

.responsive-menu-icon::before {
      display: block;   
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

Open in new window


and it will look like this:

menu
0
 

Author Comment

by:nsitedesigns
ID: 41846633
Chiltern,  

I have found people that did not know what the hamburger icon is so I thought it best to put in the word MENU next to the icon.  

Were do I look for this code?  I could not find on the functions.php page.  

Thanks for the help
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:nsitedesigns
ID: 41850881
Hello Chiltern,

Where do I look for the code you provided. Site is a wordpress site so my hands are a bit tied unlike html sites.
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 41851224
it is a standard icon for a menu.... any smart phone user will know this if they browse.
however...
if you can't find it you could try this: (actually this is a way better solution as it will stay even after the theme gests updates )

install a plugin called Simple Custom CSS
from  https://en-gb.wordpress.org/plugins/simple-custom-css/

activate it  then under appearances there will be a new menu called custom css.

add the following to the custom css:

.responsive-menu-icon::before {
    content: "MENU";
    font: normal 20px/1 'dashicons';
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

Open in new window


save it and then view the website with a refresh. (assuming no caching)
this way you won't need to touch the code.
0
 

Author Comment

by:nsitedesigns
ID: 41852942
I do use Simple Custom CSS.  I added your code.  It removed the hamburger all together.  Ideally, I would like both if possible.  The hamburger followed by the word Menu.  Is that possible?
0
 
LVL 29

Accepted Solution

by:
chilternPC earned 2000 total points
ID: 41852993
ok just use (in simple css)

.responsive-menu-icon::before {
    content: "\f333 Menu";
    display: block;
    font: normal 20px/1 'dashicons';
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

Open in new window

0
 

Author Closing Comment

by:nsitedesigns
ID: 41853010
Sa-weet!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ecommerce has truly become one of the most prosperous ways of monetizing your brand on the Internet. However, when it comes to it, auditing is undoubtedly the lifeblood of this type of business.  This article will help you to conduct your ecommerce …
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question