Divi Hamburger Menu Tutorial: Part 2 - How to Add a Fullscreen Mobile Menu on Desktop with Divi
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-des...
➤ Learn more about Divi Engine @ https://diviengine.com/
➤ Get the Divi Theme @ https://www.elegantthemes.com/affilia...
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