Elementor Menu Ripple Effect Tutorial

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
    ;}
}

Elementor Menu Ripple Effect: Your Turn

So, I hope you now feel confident to add a slick Elementor Menu Ripple Effect for your next WordPress website! If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like t share it now? If you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online. So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!