Solved

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

Posted on 2016-10-14
8
76 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 55

Expert Comment

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

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 28

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 28

Accepted Solution

by:
chilternPC earned 500 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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

839 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