In the latest version of Elementor, certain features have become a permanent fixture of the interface, and the capability to disable them from the settings has been removed.
One such feature is the Elementor Notes label and icon in the WordPress admin bar, which is quite a bummer. Many plugin developers have been hogging the admin bar, with no consideration for the user experience of the website owners.
If you find this icon to be a distraction or you simply want to clean up your admin bar, you can hide it using a bit of custom CSS.
Disabling Elementor Notes using CSS
Step 1: Access your custom CSS area
First, you need to navigate to the area where you can add custom CSS. This can typically be done in one of two ways:
- By going to Appearance > Customize > Additional CSS in your WordPress dashboard.
- By using a custom CSS plugin where you can insert your code.
Step 2: Add the Custom CSS
Once you are in the custom CSS area, you’re going to add the following code snippet:
/* Hide Elemenor Notes from Admin Bar */
#wp-admin-bar-elementor_notes {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
display: none;
}This CSS targets the specific ID that corresponds to the Elementor Notes icon in the admin bar. In this case, it’s #wp-admin-bar-elementor_notes. By setting the display property to none , the icon will no longer be visible.
Step 3: Save your changes
After inserting the CSS code, make sure to save your changes.
If you’re using the WordPress customizer, you can click the “Publish” button. If you’re using a plugin, follow the instructions to save or update your CSS.
Step 4: Check your admin bar
Lastly, visit your website and take a look at your WordPress admin bar. The Elementor Notes icon should now be hidden from view. If you still see the icon, clear your browser cache and check again.
And that’s it!
With just a few simple steps, you can clean up your WordPress admin bar by hiding the Elementor Notes icon. This can help to reduce clutter and keep your workspace organized, allowing you to focus on the more important aspects of managing your website.
Remember, while this tweak is minor, it’s always good practice to know how to revert changes. Keep a record of any customizations you make so you can easily undo them if necessary.
Note: This blog post is intended for educational purposes and assumes that the reader has basic knowledge of navigating the WordPress dashboard and adding custom CSS.
