Solved

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

Posted on 2016-10-14
8
67 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 54

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

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.

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
Find out what you should include to make the best professional email signature for your organization.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

777 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