Video Description

In Part 2 of this Divi Tutorial series on taking a Coded Design and turning it into a Divi Layout, we are going to show you how to make the Divi Mobile Menu show on Desktop with a fullscreen display. This will take a bit of CSS, so strap on in. The link to all the code used is linked 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 Section Part 2 ☞ Add the Fullscreen Menu and force the Mobile Menu on desktop Part 3 ☞ Add jQuery to the Divi Fullscreen Menu to show hovered link as background text 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-2-enabling-a-hamburger-menu-on-desktop/ ➤ Learn more about Divi Engine @ https://diviengine.com/ ➤ Get the Divi Theme @ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998 CHAPTERS 00:00 Introduction 01:02 Setting Up the Header in the Divi Theme Builder 04:58 Styling our Global Header Elements 12:26 Adding the CSS to Show the Mobile Hamburger Menu on Desktop 17:30 Conclusion