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.3/5 (13 Reviews)

Recent Posts

baseline-JPEG

How to fix slow loading images

Over the last 5 years the size of an average web page gradually increased, and so did the sizes of images used. Average page size[Read More…]

Presentation-Schema

Stand Out In Search Results

Below are the slides from the presentation: “How to make your site more visible in search results”. What if there was a way that you[Read More…]

WebPagetest-preview

10 ways to speed up your website

Why is it important? Nobody likes waiting for a slow website. Google uses Page Speed as one of the factors to determine rank. Faster load[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 (6)
  • 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
  • Why we use SiteGround for website hosting
  • 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 © 2021 · Netmagik.com · All Rights Reserved · Privacy Policy · Disclosure · Sitemap
WordPress hosting by SiteGround
Tools We Recommend

Twitter Facebook Linked In Github Codepen