Adaptive Web

A web development blog

Add Clickable Text Label to Elementor Pro Nav Menu

Today we are going to learn how to add a clickable text label to the Elementor Pro Nav Menu widget’s toggle button, using CSS. In Elementor Pro, the Nav Menu widget gives us an easy way to add a navigation menu to our site with a toggle button for a dropdown menu on smaller screens.

The Elementor Pro Nav Menu widget is a great widget, but it lacks the ability to add a clickable text label to the dropdown menu toggle button. Adding text to the toggle button can improve your website’s UX, by making it clear to all users that the button is for the website’s menu. Ok, let’s get started.

First, open the Elementor editor for your website. If you are adding the Nav Menu widget in the header template, click Edit Header at the top of the screen.

If you haven’t already done so, drag the Nav Menu widget where you would like it placed inside your template. If the widget has already been added to the template, select it to open the widget’s settings in the sidebar.

Searching for Elementor Pro Nav widget.

Next, select the Advanced tab and scroll down to the Custom CSS section and paste the below CSS snippet into the code field.

selector .elementor-menu-toggle::before {
  content: "Menu";
  display: inline-block;
  margin-right: 5px;
  font-size: 0.8em;
CSS snippet pasted into the Elementor Pro Nav Menu widget Custom CSS field.
Elementor Pro Nav widget opened and closed states.
The Elementor Pro Nav widget Advanced tab

Now you have a clickable text label for the Elementor Pro Nav Menu widget’s dropdown menu toggle button.