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:

After

Video Tutorial

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!