Create a Custom Mobile Menu Drop Down In Elementor Pro

custom mobile menu dropdown

CSS /*Tablet breakpoint*/ @media(max-width:1024px){ /*Mobile nav column */ #nav-container{ display:none; overflow:hidden; } /*Switch nav widget to verticle on mobile */ .elementor-nav-menu–layout-horizontal .elementor-nav-menu { flex-direction: column !important; } /*Make nav widget 100%*/ .nav-menu { width: 100% !important; } /*Make button widget 100%*/ .nav-btn{ width: 100% !important; } } /*Hide bar icon on desktop*/ @media(min-width:1025px){ .nav-icon{ display:none; […]

Elementor Hover Box Animation Effect In WordPress

Hover box fill effect Elementor

https://youtu.be/sXfT2kcyTBU CSS Code selector .elementor-widget-wrap::before { content:””; position: absolute; bottom:0px; left: 0px; background-color: #F54335; width: 100%; height: 0%; transition: height 0.15s ease-in; border-radius: 10px; } selector .elementor-widget-wrap:hover::before{ height: 100% !important; } selector .box-title h2{ transition: all 0.1s ease-in; } selector:hover .box-title h2{ color: white !important; } selector .box-des p{ transition: all 0.1s ease-in; } selector:hover […]

Elementor Entrance Animation on Scroll Using GSAP

entrance animation on scroll

https://youtu.be/c7HH6udFUXI Step 1 Add the class name text_reveal to the headline element Make sure the headline element HTML Tag is set to H2 Step 2 Add this to your headline element CSS tab. selector{ overflow:hidden; } Step 3 Add the class name start-reveal to the section you would like your scroll animation to begin. Make […]

Add text over Image on Hover in Elementor Pro WordPress

text over image on hover 1

https://youtu.be/jf6w5aXFOjI CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px); transition: all .3s ease } selector:hover .learn-btn{ transform: translateY(-35px); } selector .box-des{ transition: all .2s ease; opacity: 0; } selector:hover .box-des{ opacity: 1; } selector .box-content{ height: 50px; overflow: hidden; transition: all .3s […]