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

Recent Posts

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

http2 protocol

Benefits of HTTP/2 Protocol

Earlier this year, HTTP/2 protocol was released. It’s a replacement for HTTP/1.x protocol that hasn’t been changed since 1999. That’s a lifetime in Internet time![Read More…]

Improve Website Performance Presentation

WordCamp Miami 2016

I was delighted to speak at WordCamp Miami 2016. This event was on February 19-21, 2016 at Florida International University. Here are the slides from[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