Elementor Menu Ripple Effect: have you ever wanted to create a slick and modern ripple effect for your navigation on youy Elementor website? I’m gonna teach you just that, with the help of Elementor Pro!
Subscribe to my YouTube Channel
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
Elementor Menu Ripple Effect
hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’ll show you how to create a modern ripple / reveal effect for your navigation.Credits
Credit goes to Ananda Projapati who created the original in-depth tutorial. I created this tutorial with Ananda’s permission. Initially I wanted to create such a navigation for the Unfamous Academy website, and I decided to share the process. Make sure you take a look at Ananda’s in-depth tutorial by clicking here.Elementor Menu Ripple Effect Tutorial
Nothing beats a video for that kind of tutorials, so just watch the video here above. But in case you need a quick reference :Step 1. Elementor Menu Ripple Effect Initial Setup
Step 1 to create our Elementor Menu Ripple Effect:1. Add Plugins
- Elementor
- Elementor Pro
- Simple Custom CSS. & JS)
2. Add the main CSS code
– Copy the following code :/* source = https://designtheway.com/revealing-effect-in-elementor-popup/ */ body:not(.elementor-editor-active) .contact-popup{ -webkit-clip-path:circle(0% at 100% 0%); clip-path:circle(0% at 100% 0%); transition: all .6s ease-in-out; } body:not(.elementor-editor-active) .contact-popup.open{ -webkit-clip-path:circle(100%); clip-path:circle(100%); transition: all .5s ease-in-out; } #close-btn{ display:none; cursor:pointer; } #close-btn.visible{ display:block; }– Then in WordPress > Custom CSS & JS > click on “Add Custom CSS” to create a new custom CSS file – Publish
3. Add the main JS code
– Copy the following code :/* source = https://designtheway.com/revealing-effect-in-elementor-popup/ */ jQuery('#open-btn').click(function(){ setTimeout(function(){ jQuery('.contact-popup').addClass("open"); jQuery('#close-btn').addClass("visible"); }, 100) }); jQuery('#close-btn').click(function(){ jQuery('.contact-popup').removeClass("open"); jQuery(this).removeClass('visible'); });– Then in WordPress > Custom CSS & JS > click on “Add Custom JS” to create a new custom javascript file – in the right hand column make sure you select “FOOTER” for the location (where it says Where on page) – Publish
Step 2. Setting Up The Full Screen Popup
Step 2 to create our Elementor Menu Ripple Effect: We’ll focus on the reveal / ripple effect, but if you want to know how to create an full screen popup navigation with Elementor Pro, check out click here for a detailed tutorial. Also, if you want to dive deeper into learning how to create all kinds of modern and slick navigation menus with Elementor Pro, check out my dedicated Youtube playlist.1. Create a full screen new popup
- make it full screen
2. Add & style the navigation
- using the Nav Menu widget from Elementor Pro
3. In the popup settings “Settings” tab:
- de-activate the Overlay option
- de-activate the Close Button option
- set the entrance & animation is set to None
- remove any aniation duration
4. In the popup settings “Advanced” tab:
- activate the Prevent Closing On Overlay option
- activate the Prevent Closing On ESC key option
- add the class contact-popup in the CSS Classes field
- to change the Z-Index, open the Custom CSS sub-tab, and add the following code:
selector {z-index: 998!important;} /* tmp fix for iOS: selector {z-index: 996!important;} */
Step 3: Setting Up The Header
Step 3 to create our Elementor Menu Ripple Effect:1. Create a new header
- In WordPress > Templates > Theme Builder, create a new header by clicking on Add New
2. Setup the header
- style the header to your preference – I used 3 columns (for logo / call to action / icon)
- make sure you add an icon that we will use as a trigger to open the full screen navigation
- in the Advanced Tab > set the Z-Index to 997
- in the Advanced Tab > Motion Effect set Sticky to Top
- make sure you set the conditions to show on all pages on your website
- publish the header
3. Add and setup a custom Open trigger
- click on the custom icon that will be used as a trigger, then in the Layout tab of that icon, link it to the full screen popup that we created in the previous step(you do that by clicking on the dynamic tags icon, next to the link field, then click on Action > Popup, and search for the popup you want to link to)
- in the advanced tab of the icon, in the CSS ID field, add the following ID:
open-btn
4. Duplicate the header section
- duplicate the header section by right-clicking on the header section and selecting Duplicate
- in the Style tab of the new header, make sure the background color opacity is set to 0 to make it transparent
- in the Advanced Tab > set the Z-Index to 999
- in the Advanced Tab > Motion Effect set Sticky to None
5. Add and setup a custom Close trigger
- in the new header, change the icon to an appropriated icon (that lets users now it will perform a close action)
- IMPORTANT!!! remove the dynamic link to the popup (you do that by clicking on the X in the link field, in the Layout tab)
- in the close, remove the first 2 columns
- in the Advanced tab of the icon, in the CSS ID field, add the following ID:
close-btn
- once you’ve pasted the code, the custom Close icon will disappear (that’s normal because the close-btn ID is just enabling what the javascript code added at the beginning of this tutorial
- in Advanced > Positioning sub-tab, set position to Fixed and play with the horizontal and vertical values to align the Close icon to the Open icon
- as the close icon is not visible, you may have to go back and forth between the editing window and the live view (I used one browser window in regular mode and one browser window in incognito mode)
6. Overlap The New Header
- with the new header section selected, in Advanced > Custom CSS sub-tab, add the following code (the new header will overlap the main header, and that’s the goal):
selector {position:absolute; top:0;}
Step 4: Fixing The Mobile Version
Step 4 to create our Elementor Menu Ripple Effect:1. Fixing the custom close trigger
- go into mobile view (responsive options at the bottom left of the Elementor editing window)
- with the custom close trigger icon from the new header section selected, go to Advanced > Positioning sub-tab, and play with the horizontal and vertical values to align the Close icon to the Open icon
- as the close icon is not visible, you may have to go back and forth between the editing window and the live view (I used one browser window in regular mode and one browser window in incognito mode)
2. Removing the text on the button in the header
This is valid for the type of header shown in the video, where I used a button next to the trigger. In mobile mode there is not enough space to show logo + button + trigger, so the idea is to remove the tet from the button and just show the icon in the button. For that, click on the button in the main header, then go to Advanced > Custom CSS sub-tab and add the following code:@media (max-width: 767px) { selector .elementor-button-text { display:none!important ;} }