Are you facing issues with navigation arrows not visible in Elementor? Elementor page builder offers many widgets where we can display a carousel. These carousels always provide an option to set the navigation arrows and navigation dots.
In this article, we will see how to fix the navigation arrows not visible in the Elementor issue. We will consider the different scenarios that may cause this issue and the solutions for the same.
After informing so many users, we decided to share the exact method we use to solve this problem.
How to fix Navigation Arrows not visible In Elementor
While editing widgets that provide the navigation arrows, it looks fine in the Elementor editor. However, many times when we publish the page, the arrow icons are not visible in the frontend. These icons are replaced by square boxes, which look very bad from the designing point of view.
Apart from the Elementor, many Elementor addons provide widgets like Woo Products, Post widgets, Image galleries, Image carousel, contact form stylers, Testimonial sliders that generally have the carousel view option.
In case you have used any of these widgets and the arrows are visible while editing in Elementor and are replaced by boxes after publishing the page, then this can be related to Font Awesome library that we need to load inside the Elementor.
Kindly follow the steps to solve the issue:
- Inside the Dashboard click on Elementor
- Open the Elementor settings
- Advanced Tab
- Turn on the Load Font Awesome 4 Support by selecting ‘Yes’.
How to fix the Navigation issues if the Font awesome support is already on
In case, the above setting mentioned is already set to ‘Yes’ and you’re still not able to see the arrows then this can be an issue due to other plugins or the theme activated.
Deactivating Plugins:
Most of the websites usually use Elementor Pro in combination with other free and paid Elementor Addons. These plugins can create a conflict in loading the Font awesome script.
Kindly follow these steps to solve this issue:
- Deactivate all the plugins except the Elementor plugin and the addon plugin for the widget used.
- Check is the Font awesome is enabled from the Elementor > Advanced settings.
- In case, the icons are visible on the frontend now, kindly start activating other plugins one by one.
- Keep on checking the icons are visible or not after activating every plugin.
This should surely resolve the issue if there is a conflict due to plugins.
Temporarily switching to WordPress default themes:
Just in case the problem does not resolve by deactivating the plugins, then this can be due to the theme conflict with the Font Awesome script.
To resolve the issue, kindly temporarily switch to a default WordPress theme like Twenty Twenty. Now check the arrow icons on the frontend, they must be visible now.
This should surely solve the issue if there is a theme conflict.
Now that you have caught that the theme is the culprit, you can try opting Elementor compatible themes. These themes are well tested with the page builder and are suggested by most of the Elementor users.
If you’re facing any other issues while using Elementor, kindly let us know in the comments section. We would check the issue and publish a solution as soon as possible.
Did this solution work for you? Let us know if you have come across any other way to fix the navigation arrows not visible in Elementor issue in the comment section.
Recommended reading:
