Add Text Next to the Divi 5 Hamburger Menu
If you've ever had a website visitor overlook the hamburger menu on mobile, you're not alone. While the three-line menu icon has become a common design pattern, some users—especially those who aren't as tech-savvy—may not immediately recognize what it does. A simple way to improve usability in Divi 5 (and earlier versions of Divi) is by adding descriptive text next to the hamburger icon.
By displaying the words "FULL MENU" beside the mobile menu icon, you're giving visitors a clear visual cue that more navigation options are available. This small enhancement can improve the user experience, reduce confusion, and even encourage visitors to explore more of your website.
The best part is that this customization only requires a few lines of CSS. Simply add the following code to Divi → Theme Options → Custom CSS, your child theme stylesheet, or your preferred custom CSS location.
Of course, you're not limited to the text "FULL MENU." You can customize it to say "MENU," "NAVIGATION," "EXPLORE," or anything else that fits your site's branding. You can also adjust the color, positioning, font size, or font weight to better match your design. Since this uses the CSS content property, changing the displayed text is as easy as editing a single line.
Small usability improvements often make a bigger impact than flashy design changes. Adding a descriptive label next to your Divi mobile menu is a quick, beginner-friendly tweak that helps visitors find their way around your site with confidence. It's one of those simple tips that takes less than a minute to implement but can make your mobile navigation feel much more intuitive.
.mobile_menu_bar:after {
position: relative !important;
content: 'FULL MENU';
bottom: 9px;
left: 10%;
color: #D4AF5A;
}