Divi Hamburger Menu Tutorial: Part 3 – How to Add a Background Text Hover Effect to Divi with jQuery

In Part 3 of this Divi Tutorial series on taking a Coded Design and turning it into a Divi Layout, we show you how to add some jQuery that will make the hovered menu item text display in the background of your Divi menu. 📱 Divi Mobile Cheat Code (Do all this in 5 minutes!) ➤ https://youtu.be/RDeTHhtHohoYou’ll find the links to all the code used below.We originally saw this layout and Navigation Menu on Reddit in /r/WebDev and loved it.In this 3 part tutorial, we are going to build out a Hero Section and Navigation Header that will display a mobile menu on the Desktop. We liked the punny thought of having a hamburger menu on a hamburger-themed layout.Part 1 is all about building out the Hero Section and using some of the Divi Transform and Animation effects to make it convert.We originally saw this layout and Navigation Menu on Reddit in /r/WebDev and loved it.Part 1 ☞ Building the Hero SectionPart 2 ☞ Add the Fullscreen Menu and force the Mobile Menu on desktopPart 3 ☞ Add jQuery to the Divi Fullscreen Menu to show hovered link as background textCheat Code ☞ Adding this Effect with Divi Mobile in under 5 Minutes!Follow one part, or all three, you can learn some valuable Divi Theme skills in each one.LINKS➤ Text Tutorial & Code @ https://diviengine.com/hand-coded-design-to-divi-layout-part-3-adding-the-background-text-hover-effect/➤ Divi Mobile Cheat Code (Do all this in 5 minutes!) @ https://youtu.be/RDeTHhtHoho➤ Learn more about Divi Engine @ https://diviengine.com/➤ Get the Divi Theme @ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998CHAPTERS00:00 Introduction01:21 Adding the Background Text to the Global Header07:53 Modifying the Existing CSS12:19 Adding the Divi jQuery to Show the Text17:24 Conclusion