Hamburger Time,
All the Time.
Yes yes, I’m aware of the obvious pun here, but hey, who doesn’t love hamburgers? The second step to take this hand-coded design and turn it into a Divi Hero Section layout is to replicate the navigation menu. This means we need to take our stock Divi Menu Module and force it to display the Hamburger Menu on Desktop with Divi.
More in this series.
To get our Hamburger Menu to show on Desktop using Divi, we first need to go ahead and build a global header for our site using the Divi Theme Builder. Nothing fancy needs to happen regarding that layout, we’ll just add a burger image for the sake of being punny, then a menu module to display our selected menu. To wrap things up we will add some CSS which will take care of the last details to make sure our boring desktop menu shows as a hamburger menu no matter what device our users are using.
Don’t forget, this is Part 2 in a 3 part series, so if you missed part 1, take a look at our post on Building The Hero Section layout.
Preview:
Before
After
Video Tutorial
Table of Contents
Difficulty
Intermediate
Time
15 Minutes
Setting up the Header in Theme Builder
To get rolling we need to build a Global Header Template using the Divi Theme Builder with the appropriate sections and rows that will house our modules.
Divi > Theme Builder
Default Template > Add Global Header > Build Global Header
Header Section
Section Settings
CONTENT TAB
BACKGROUND
Color: Transparent
DESIGN TAB
SPACING
Padding Top/Bottom: 0px
ADVANCED TAB
CSS ID & CLASSES
CSS Class: de-burger-menu
POSITION
Position: Absolute
Location: Top-Center
Header Content Row
Add a 50-50 Row > Close the popup to add a Module for now
Row Settings
CONTENT TAB
BACKGROUND
Color: Transparent
DESIGN TAB
SIZING
Width: 100%
Max-Width: 2560px;
SPACING
Padding (all): 15px
ADVANCED TAB
CUSTOM CSS
Main Element: display: flex;
Our Global Header is now ready to receive the various modules that will make up the content, so let’s quickly build that out.
Column 1
Let’s hit the grey ➕ and add an Image Module.
Image Module Settings
CONTENT TAB
IMAGE
Image: Download and use icon.png
DESIGN TAB
ALIGNMENT
Image Alignment: Left
SIZING
Max Width: 50px
Column 2
Let’s hit the grey ➕ and add a Menu Module.
Menu Module Settings
CONTENT TAB
CONTENT
Menu: Select the menu you want displayed here, or make sure to create one under Appearance > Menus
ELEMENTS
Show Shopping Cart Icon: NO
Show Search Icon: NO
BACKGROUND
Color: Transparent
DESIGN TAB
MENU TEXT
Active Link Color: #f1c40f
Menu Font Weight: Ultra Bold
Menu Text Color: #ffffff
Menu Text Color (hover): #f1c40f
Menu Text Size: 34px
Menu Text Shadow: Option 4
ICONS
Hamburger Menu Icon Color: #171717
Hamburger Menu Icon Font Size: 38px
Adding the CSS to Show the Hamburger Menu
The last step here is to add the CSS that will force the Menu Module in the Divi Header that we just built, to display a Divi Hamburger Menu on Desktop.
Column 2 > Add a Divi Code Module > Paste the CSS below between opening and closing <style> tags.
Look, a Hamburger on Desktop…🥁
Conclusion
You’ve smashed Part 2 and now have a fully functional Mobile Hamburger Menu on Desktop using Divi. Now, remember, you can use this new knowledge and the CSS on any Divi Layout that you might want this type of header on. You can also use this Hamburger Menu on just one page by using the Divi Theme Builder Template for that specific page if that is a little more your jam.
In Part 3, we will be adding some jQuery to create that gorgeous background text effect when the menu items are hovered. Stay tuned!
Definitely drop your comments below and let us know what you think so far!
Thank you so much, this was brilliant and just what I needed.
Is it possible to right alight all the text on the menu?
Hi! this is a great tutorial!
Is there a way to make the hamburger menu “sticky” to the top of the page? Currently it scrolls out of view.
I tried setting scrolling to “sticky” in both the section and menu module, but neither have any effect.
Hi, Great content and a very usefull guide.
I did everything in it and changed what i needed in terms of coulor and design and it works and looks great. I have one issue though!
I get a little bit of horizontal overflow when the menu is open. Both on mobile and desktop! How do i fix that. https://vitickevit.lsu.se/antisemitism/ thats the link to where the menu is live.
Thanks 🙂
/Jocke
I am also having that problem 🤔 How would you restrict scrolling?
I have the same problem. Is it possible to prevent horizontal & vertical scroll when fullscreen menu is open ? Thank you in advance 🙂