If you’re working with Divi, you must know the Divi search icon (🔎). The Divi search icon itself isn’t a standalone element, you must turn on the option to display it on your website. It’s a part of the header elements on the Divi Theme Customizer and also part of the element of the Divi Builder’s Menu module.
In this article, we’ll walk you through some simple steps on how to accelerate the animation effect on your Divi search icon using custom CSS. This method will cover both the Divi search icon in the Divi Theme Customizer and the Divi Builder’s Menu module.
Even if you’re new to CSS, don’t worry! We’ll break down the steps into easy-to-follow instructions. By the end of this guide, you’ll have a Divi search icon that animates with snappy precision, enhancing your website’s overall performance.
How to Speed Up Animation Effect on Divi Search Icon
1. Speed up the Search Icon Animation Effect in the Divi Theme Customizer
Enable the Search Icon option
As we mentioned earlier, the search icon isn’t a standalone element, and you need to enable the option first to display it on your website.
Navigate to the Divi Theme Customizer; there are two ways to access it as below:
- WordPress dashboard -> Appearance -> Customize
- WordPress dashboard -> Divi -> Theme Customizer
Next, open the Header & Navigation settings, then go to the Header Elements block where you will find the option to enable showing the search icon.
Once you’ve enabled the search icon and made any desired customizations, don’t forget to save and publish the changes using the Publish buttons in the top right corner of the Divi Theme Customizer.
Add the Custom CSS
Now it’s time to add the CSS code to your Theme Customizer.
Copy the CSS snippet below and paste it into the Additional CSS input field.
.et_pb_search_visible.et_pb_no_animation {
opacity:unset!important;
}
.container.et_search_form_container.et_pb_search_visible {
animation: fadeInTop 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
}
.et_pb_search_form_hidden {
animation: fadeOutTop 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
opacity: 0;
}
.et_pb_menu_hidden #top-menu,
.et_pb_menu_hidden #et_search_icon:before,
.et_pb_menu_hidden .mobile_menu_bar {
animation: fadeOutBottom 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.et_pb_menu_visible #top-menu,
.et_pb_menu_visible #et_search_icon:before,
.et_pb_menu_visible .mobile_menu_bar {
animation: fadeInBottom 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
Go to one of your website’s pages and give it a try to see the result.
2. Speed up the Search Icon Animation Effect in the Divi Builder’s Menu module
Enable the Search Icon option
First, please ensure that you’ve already turned on the search icon option.
On the Menu module settings, navigate to the Content tab -> Elements -> Show Search Icon.
Add the Custom CSS
Next, we’re going to add the CSS snippet to the Menu module. On the module settings, navigate to the Advanced tab -> Custom CSS.
Please copy the CSS snippet below and paste it into the CSS input field.
.et_pb_menu__search-container.et_pb_menu__search-container--visible {
animation: fadeInTop 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
}
.et_pb_menu__search-container.et_pb_menu__search-container--hidden {
animation: fadeOutTop 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1);
opacity: 0;
}
.et_pb_menu__wrap--hidden,
.et_pb_menu__wrap--hidden #et_search_icon:before,
.et_pb_menu__wrap--hidden .mobile_menu_bar {
animation: fadeOutBottom 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1) !important;
}
.et_pb_menu__wrap--visible,
.et_pb_menu__wrap--visible #et_search_icon:before,
.et_pb_menu__wrap--visible .mobile_menu_bar {
animation: fadeInBottom 0.2s 1 cubic-bezier(0.77, 0, 0.175, 1) !important;
}
Preview your page to see the result. Don’t forget to save your project and publish it if you want to.
What Do the Two CSS Snippets Do?
The two CSS snippets we provided above control the animation effects in Divi menus (Theme Customizer and Menu module).
It fades search icons and mobile menus in/out with a 0.2-second animation and a specific easing effect.
Replace the values in each CSS snippet if you want to change the animation effect speed of your Divi search icon.
The Bottom Line
By incorporating the provided custom CSS, you can significantly improve the animation speed of the search icon on your website. This targeted adjustment enhances the visual appeal of the interaction and contributes to a more responsive user experience.
We believe that visitors will appreciate the smoother and faster animation, which can subconsciously reinforce a sense of efficiency and polish throughout your website. This positive impact on user experience can increase engagement and a stronger overall impression of your brand.
