Divi Theme 3 Fun Menu UNDERLINE Animations
How to add 3 fun and eyecatching menu underline animations to your site with the Divi Theme. In this video we will be showing how to create this using some pre written CSS Code (Below). Today we will be demonstrating how to create this feature with the Additional CSS panel.
So follow along with this video to see how to create this with your Divi site.
In this video we will cover:
Using The Additional CSS Panel.
Choosing The CSS Code.
Adjusting The Code.
Animated Underline Animation.
Animated Dashed Animation.
Animated Gradient Animation.
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
Embedding a live Facebook feed into a website offers numerous benefits. Firstly, it enhances engagement and user experience by providing real-time updates and interactions with the Facebook community directly on the website. This dynamic content keeps visitors engaged and encourages them to spend more time on the site. Secondly, it expands the reach and visibility of a Facebook page by extending its presence to the website’s audience. This can help increase followers, likes, and overall social media reach. Additionally, embedding a live Facebook feed promotes social proof, demonstrating the active and vibrant online community associated with the website, thus building credibility and trust among visitors. Lastly, it facilitates seamless social sharing, allowing users to easily share website content on their Facebook profiles, thereby expanding the site’s reach even further.
CSS CODE USED TODAY
( Copy and paste into your Additional CSS Panel )
/* Animated line */
.nav li a{
position: relative;
}
.nav li a::after {
content: ”;
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 2px;
background-color: #0D2B6F;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav li a:hover::after {
transform: scaleX(1);
}
/* Dashed line */
.nav li a {
position: relative;
}
.nav li a::after {
content: ”;
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
border-bottom: 1px dashed red;
}
.nav li a:hover::after {
border-bottom: 5px dashed red;
}
/* Gradient Line */
.nav li a {
position: relative;
}
.nav li a::after {
content: ”;
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
height: 4px;
background-image: linear-gradient(to right, #0D2B6F, #fff);
background-size: 200% 100%;
transition: background-position 0.3s ease;
}
.nav li a:hover::after {
background-position: -100% 0;
}
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Latest YouTube Videos