How To Add Text to Elementor Hamburger Menu Icon – Before and After

How To Add Text to Elementor Hamburger Menu
NOTE: Elementor Pro is required!

Here is a quick and easy way to add text to elementor hamburger menu without using a plugin. If you would like to add a word such as “Menu” before the elementor hamburger menu icon good old CSS can get the job done!

Add Text to Elementor Hamburger Menu Icon

If you would like to add the text before the elementor hamburger menu button (the one with three lines), you need to add CSS code to the “.elementor-menu-toggle” class. Here is the code to do that:

.elementor-menu-toggle:before {
content:'Menu'; // (Change the text in the ' ' to what you it to say)
position: absolute;
margin-right: 120px; // (FYI: Adjust the margin to fix your particular design. You can also add margin-top, margin-left as it applies to your design)
}

To add the text after the elementor hamburger menu button (the one with three lines), use this code:

.elementor-menu-toggle:after {
content:'Menu'; // (Change the text in the ' ' to what you it to say)
position: absolute;
margin-left: 120px; // (FYI: Adjust the margin to fix your particular design. You can also add margin-top, margin-right as it applies to your design)
}

That’s it! If you have any questions, feel free to contact me.

Join the Movement

Enter your email to receive insights, information, and inspiration to help you create digital experiences that attract the people your business cares about. You can easily unsubscribe at anytime.

SHARE THIS

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Ready to grow your business?

We love hearing about unique and interesting projects, and can not wait for the opportunity to have a conversation with you to show you why we are the best web design company for you.