Website Design Orlando

Responsive-Mobile design by Irina Blumenfeld

  • About
  • Services
    • Website Design
    • Local SEO
    • Digital Marketing
    • Website Care
  • Projects
  • Testimonials
  • Articles
    • Speaking
    • Tutorials
    • Resources
  • Support
  • Contact
  • Twitter
Home / Tutorials / How to add text “Menu” next to Hamburger Icon

How to add text “Menu” next to Hamburger Icon

Updated: February 8, 2019 //

Mobile Menu Button

When you build a responsive site, you most likely will have a Hamburger icon for Menu. A lot of WordPress Genesis themes come with responsive menuĀ icon that uses Dashicons, such as:

Gist – Responsive Hamburger Menu icon

The code above only adds Hamburger icon but without text Menu next to it. If you want to add text – Menu, you need to add ::after pseudo element (in your styles.css), like this:

Gist – How to add text “Menu” to Hamburger icon

Complete code for the Hamburger icon with text Menu:

Gist – Complete code for the Hamburger icon with text Menu

4.4/5 (19 Reviews)

Recent Posts

When there is no WiFi connection

Why is my WiFi so Slow? Best ways to Fix Slow WiFi at home

Recently I helped a couple friends speed up their home WiFi. One of them complained he couldn’t use Zoom teleconferencing at the same time as[Read More…]

Best Practices for Faster Websites

Best Practices For Faster Websites

Slides from my talk at WordPress Meetup Orlando about Best Practices for Faster Websites. I often hear people asking: “Why is my site slow?” In[Read More…]

Display custom post types in a widget

How to add custom post types to a Widget

Recently I was working on adding Custom Post Type – Portfolio in a widget on Home page. An example of that would be Portfolio display[Read More…]

About Irina Blumenfeld

Web Consultant, empowering business owners through WordPress. Passionate about Web Performance.
Follow on Twitter

Comments

  1. angelia says

    April 19, 2016 at 1:11 am

    Nice, can i use this code??
    content: “\f333 Menu”;

    • Irina Blumenfeld says

      April 19, 2016 at 9:12 am

      You can, but it you won’t be able to style it as when you put content: “Menu”; after

Categories

  • Resources (5)
  • Speaking (14)
  • Tutorials (17)

More Articles

  • WordCamp Orlando 2019
  • Stand Out In Search Results
  • How To Make Your Site Stand Out In Search Results
  • Speeding Up WordPress
  • WordCamp Jacksonville 2018
  • WordPress Orlando Gutenberg Meetup
  • WordCamp Miami 2018
  • Steps to do before launching a WordPress website
  • 10 Steps To Do Before Launching Your WordPress Website
  • Why is my WiFi so Slow? Best ways to Fix Slow WiFi at home
  • WordCamp Orlando 2017
  • How to hide author username in Beaver Builder Posts Module
  • How to fix slow loading images
  • Best Practices For Faster Websites
  • Plugins
  • WordCamp Orlando 2016
  • How to add star rating in WordPress
  • Make WordPress website faster in 3 steps
  • Migrate WordPress to HTTPS
  • Why you should migrate to HTTPS
  • WordCamp Jacksonville 2016
  • How to disable Emojis in WordPress
  • WordCamp Miami 2016
  • How to remove query strings from static resources
  • How to enable Free SSL, HTTP/2 protocol and CDN
  • Improve Your Website Performance
  • List of resources to speed up your website
  • 10 ways to speed up your website
  • Benefits of HTTP/2 Protocol
  • How to add custom post types to a Widget
  • Add previous/next links on single page of custom post type in Genesis
  • How to add text “Menu” next to Hamburger Icon
  • About
  • Services
  • Projects
  • Testimonials
  • Articles
  • Support
  • Contact
  • Twitter

Copyright © 2023 · Netmagik.com · All Rights Reserved · Privacy Policy · Disclosure · Sitemap
WordPress hosting by SiteGround
Tools We Recommend

Twitter Facebook Linked In Github Codepen