Solved

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

Posted on 2016-10-14
8
96 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 56

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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

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 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Text too large in Chrome 17 56
MediaWiki - Move a site 4 30
How do I recover my WordPress credentials? 8 14
How do I update select listbox after search 2 22
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

735 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