Divi Theme To How Add A Menu Underline Effect Using A Pseudo Element

Divi Theme To How Add A Menu Underline Effect Using A Pseudo Element. The Divi theme from elegant themes is absolutely awesome.

Divi Basics Playlist : https://www.youtube.com/watch?v=zQ5PWxUuFac&list=PLqabIl8dx2wrjx6-A4oOD4NU_IfEVM5Qz

Divi Supreme Modules Playlist: https://www.youtube.com/watch?v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Divi Brain Free Plugin Playlist : https://www.youtube.com/watch?v=X690rObOd3w&list=PLqabIl8dx2wpnMFBgEd_4yqtsaKYzUNwd

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

How To Create A Global Footer Video: https://youtu.be/Wf864NcNb24

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Plugin 10% Off: https://bit.ly/DiviSupremeCoupon

Divi Brain Addons Free Plugin: https://brainaddons.com/

My Blog : https://web-design-and-tech-tips.com

---------- CHAPTERS ----------

00:00 Intro
01:41 Selecting The Menu Links
04:51 Adjusting The Navbar Height
07:07 Creating The Pseudo Element
10:35 Targeting The Dropdown Menu Item
12:12 Creating The Hover Effect
13:37 Result

---------- CSS CODE USED TODAY: ----------

/* Top Nav Decoration */

#top-menu a {
padding-bottom: 10px !important;
}

#et-top-navigation {
padding-top: 35px !important;
padding-bottom: 25px !important;
}

#top-menu a:before {
content: "";
position:absolute;
left:0;
bottom:0;
height:1px;
width:100%;
border-bottom: 3px solid transparent;
}

.menu-item-2710 a:before {
width:85% !important;
}

#top-menu a:hover:before {
content: "";
position:absolute;
left:0;
bottom:0;
height:1px;
width:100%;
border-bottom: 3px solid #0D2B6F;
}


---------- RECOMMENDED PLAYLISTS ----------

Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB

Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco

WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e


---------- RECOMMENDED VIDEOS: ----------

Bootstrap 4 Complete One Page Scrolling Website Tutorial : https://www.youtube.com/watch?v=JWmzgixLUUY

Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: https://www.youtube.com/watch?v=CsNmVouqt38

Bootstrap - How to edit a bootstrap template: https://www.youtube.com/watch?v=_yFy5Zw2BQc

Divi Add a live facebook feed to your divi or any wordpress website: https://www.youtube.com/watch?v=4KReMpWdEz8

Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: https://www.youtube.com/watch?v=mNDtB86_hGU

Elementor Wordpress Builder How To Build A Parallax Section: https://www.youtube.com/watch?v=aXoCtPAJiGk

---------- SOCIAL MEDIA ----------
Follow what I'm doing on:

Facebook: https://www.facebook.com/system22.net/

Twitter: https://twitter.com/22ITSolutions1

Linkedin: https://www.linkedin.com/in/jamie-henry-546b7377/


Support the channel: https://paypal.me/system22


Courses I teach: https://www.udemy.com/user/jamiehenry2/


Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q


#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite