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.
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;
}
Now you have a clickable text label for the Elementor Pro Nav Menu widget’s dropdown menu toggle button.
References