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 (18 Reviews)

Recent Posts

improve-your-website-performance

Improve Your Website Performance

Slides from my recent talk “Improve Your Website Performance” This talk was focused on why speed matters, how you can measure, and different ways you[Read More…]

Migrate WordPress to HTTPS presentation

Migrate WordPress to HTTPS

Slides from my talk at WordPress Orlando Meetup on how to migrate WordPress site from HTTP to HTTPS. As more sites transition to HTTPS and[Read More…]

How to remove query strings from static resources

How to remove query strings from static resources

If you test your website speed with tools, such as GTMetrix.com, or on Pingdom Tools, you’ll see a suggestion: Remove Query strings from static resources.[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 © 2022 · Netmagik.com · All Rights Reserved · Privacy Policy · Disclosure · Sitemap
WordPress hosting by SiteGround
Tools We Recommend

Twitter Facebook Linked In Github Codepen