Solved

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

Posted on 2016-10-14
8
63 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 52

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
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now