May 20, 2021 | Divi Resources

How To Build an Admiring Divi Hamburger Menu on Desktop for Your Website?

Whether you want less items on the header of the site or make it look modern, the Divi hamburger menu on the desktop is always the favorable choice for designers to do it. And in this tutorial, we’re going to see how you can do it easily without spending much time. Plus, we’ll also look at some prebuilt Divi hamburger menu headers available online that can help you transform your Divi headers in the way you want.

But first, let’s see how we can create a Divi hamburger menu for your desktop website.

Preview


Step 1: Open Divi Theme Builder & Create a Header Template


To create a Divi hamburger menu on the desktop, we’ll create a global header using the Divi Theme Builder. Go to Divi (on your WordPress Dashboard) → click Theme Builder.

Opening Divi theme builder

Then, click Add Global Header to create our header with a hamburger menu. (If you need to create the header for some specific page, you can also do that by clicking the Add New Template button and following further options.)

Creating a new global header in the Divi theme builder

After selecting the Global header option, it will ask you how you want to build your header— Select Build Global Header from the given options.

Selecting Build Global Header for Divi hamburger menu on desktop

Then, further, it will ask you how you want to build your Divi header layout; simply select BUILD FROM SCRATCH and move to the next step.

Selecting build from scratch option in Divi Theme Builder

Step 2: Insert a Row With Dual Columns & Apply Customizations


Once selected the Build From Scratch option, insert a new row with two columns (left one shorter than the right) that we would use to place our menu items.

Inserting a New Row in the Divi Theme Builder

a) Row Customizations

Now before we place our menu items, first, we need to apply customizations to the row and its columns. So, go to the (⚙) Gear icon and click it to open row settings.

Opening Row Settings

Then go to the DesignSizing → and apply customizations as follows,

Row Sizing Settings for Divi Hamburger Menu

  • Use Custom Gutter Width: YES
  • Gutter Width: 2
  • Width: 100%
  • Max Width: 100%
  • Row Alignment: Center

Now move to the Spacing menu, and set Top and Bottom Padding at 10px.

Spacing value for Divi hamburger row

After this, go to the Advanced tab → open Scroll Effects, and apply customizations as follows,

Sticky option for the Divi hamburger menu row

  • Sticky Position: Stick to Top
  • Offset From Surrounding Sticky Elements: YES
  • Transition Default and Sticky Styles: YES
  • Scroll Transform Effects: View Screenshot

b) Column Customizations

After customizing our Divi hamburger menu row, we need to apply a few customizations to the columns we’ve added. Go to the Content tab of the Row, then click (⚙) Gear Icon next the column option.

Opening Column Settings

Apply Customization for the 1st Column

Go to the Design tab → SpacingDesktop and set Left Padding to 10%. For Tablet and Mobile, set padding to 5%.

Column Spacing for Hamburger menu on desktop for Divi

Once you set the padding, move to the Advanced tab → Custom CSSMain Element → set margin bottom to 0. Use the following CSS to do that.

margin-bottom: 0;

This will remove excessive space under the column.

Setting margin bottom to 0 for hamburger column 1st

Apply Customization for the 2nd Column

Follow the same steps to open settings of the 2nd column, then go to the Design tab → SpacingDesktop and set Right Padding to 10%. For Tablet and Mobile phone, set Right Padding to 5%.

Right padding for 2nd column of the Divi hamburger header

That’s it, we’ve done first half to create our Divi hamburger menu. Let’s head towards the next and place our menu items.

Step 3: Place Divi Hamburger Menu Items & Apply Customizations


Menu items are the main components of the Divi hamburger menu. Therefore, the following steps will help you place them nicely on the header. Plus, to make them look completely in sync with each other, all of the items go through some customization. So, make sure you apply each customization carefully and completely. Let’s first add our Logo.

a) Adding Logo on Hamburger Menu for Desktop

To a logo to the hambuger menu, head over to the left column and insert the Image module.

Inserting logo for the hamburger menu

Then insert your logo in the Image settings. After that, move to the Link settings and in the Image Link URL assign Homepage Link through dynamic options.

b) Adding Other Divi Hamburger Menu Items

After placing the logo on the menu, it’s time we add other hamburger items to it. To do that, follow the below steps,

• Placing Email Menu Item

Go to the 2nd column and insert a Blurb module. We’ll use this blurb module to show the email address on the menu.

Inserting Divi Blurb module for Email at Hamburger menu

Content Customizations

As soon as the Blurb module gets inserted on the page, the settings window will appear. Here, you need to enter the email address in the Title input field and remove the placeholder text.

Customized Email Blurb of the Hamburber menu

After this, go to the Image & Icon settings, enable Use Icon, then select the icon shown in the below screenshot.

Enabled Icon option for the email item for the Divi hamburger menu

Furthermore, to enable our email menu item open the user’s mail option in his/her system upon clicking it. We need to add a linking query in the link settings. Therefore, go to the Link settings, then paste the following code in the Title Link URL.

mailto:abc@example.com
Linking query for the Email Divi hamburger menu item

Design Customizations

Once done with the Content settings, move to the Design tab to further apply some appearance tweaks. In the Design tab, first, go to the Image & Icon, and apply the following customizations.

Email menu item's image and icon customizations

  • Icon Color: #E02b20
  • Image/Icon Place: Left
  • Use Icon Font Size: YES
  • Icon Font Size: 18px

Now after Image & Icon customizations, move to the Title Text settings, and apply tweaks as follows,

  • Title Heading Level: H4
  • Title Font: Poppins
  • Text Color: #383838
  • And Title Text Size: 16px

Further, go to the Spacing settings and set Right Margin to 30px, and Bottom Margin to 0px.

Spacing value for Email Divi hamburger menu item

Once done with the Spacing, go to the Animation settings → Image/Icon Animation → select No Animation.

Advanced Customizations

After disabling the animation effect for the icon of the email menu item, move to the Advanced tab, then open Custom CSS settings, and paste the below code in Blurb Title.

margin-left: -20px;
padding-bottom: 0;

It will bring our email menu item’s text near to the icon and clear exssesive space.

Inserting Custom CSS for Email Blurb Title

With the email menu item, we’re not done yet. It still needs to be defined on what devices it should get displayed. Therefore, we have to tweak its visibility. So, to do that, go to the Visibility settings, and check Disable on for Phone and Tablet.

Email menu item's visibility option

Here, we’re done with our Email menu item for the Divi hamburger menu on desktop, let’s place another item.

• Placing Phone Menu Item

To add a phone menu item to the Divi hamburger menu on the desktop, follow the same step as we did in the case of the Email menu item. Use the same customizations and codes to synchronize the look and feel. However, choose the below icon in the Image & Icon settings of the Content tab.

Phone menu item icon selection for the Divi hamburger menu

Plus, use the following link URL in the Title Link URL input field of the Link settings to open the phone application when the user clicks on the Phone menu item.

tel:000-000-0000

Title Link URL for the Phone menu item

Once done with this, save and move to the next step in which we’ll place a Book Now CTA.

• Placing CTA on the Divi Hamburger Menu for Desktop

Insert the Button module right under the phone menu item. To do it easily, you can change the builder view to classic, just like the below screenshot.

Inserting button module for the Divi hamburger menu

After it’s on the builder, the Content tab will appear. Input CTA’s text in the Text settings, and paste the targeted URL in the Link settings.

CTA Design Customizations

Now, after completing Content customizations, move to the Design tab → TextText Color → select Light.

Selecting Light Color for the CTA on Divi hamburger menu on desktop

After this, go to the Button settings, and apply customizations as follows,

Button Customizations for Divi Hamburger menu on desktop A

  • Use Custom Styles for Button: YES
  • Button Text Size: 14px
  • Click Hover Buttton, then apply Button Text Color
  • Desktop: #FFFFFF
  • On Hover: #E02B20

Button background color selection for Hamburger menu

  • Cilck hover button and apply Button Background color as,
  • Desktop: #E02B20
  • On Hover: #FFFFFF

Button Text Customizations for Divi hamburger

  • Button Border Color: #E02B20
  • Button Letter Spacing: 1px
  • Select Poppins as Button Font
  • Button Font Style: TT
  • Show Button Icon: NO

The last thing you need to do in the Design tab after the Button setting is to go to the Spacing and set Margin – Padding values.

Divi hamburger menu button spacing

  • Top Margin: –
  • Bottom Margin:
  • Left Margin: –
  • Top and Bottom Padding: 10px
  • Left and Right Padding: 30px

We’re done with CTA’s design customization; let’s move to the advanced tab and perform some visibility actions.

CTA’s Advanced Customizations

Nothing much needed to do in the Advanced tab of the CTA; all you need to do is go to the Visibility settings and check Disable onPhone. And save the setting.

CTA visibility tweak

That’s it; we’re done with our Divi hamburger menu’s CTA. Let’s add our hamburger icon and apply some customizations.

• Placing Hamburger Icon

Insert the Blurb module under the CTA. As soon as you insert it, the Content tab will open with the Text settings. Nothing needs to be done here, so move to the Image & Icon settings choose the hamburger icon.

Hamburger icon selection

Once chosen the icon, move to the Design tab to apply appearance tweaks on it. For that, we need to open the Design tab.

Hamburger Design Customizations

In the Design tab, first, go to the Image & Icon settings, and apply tweaks the same as mentioned below,

Hamburger icon's design customizations

  • Click hover button for Icon Color and apply color as follows,
  • Desktop: #E02B20
  • On hover: #000000
  • Image/Icon Alignment: Left
  • Use Icon Font Size: YES
  • Icon Font Size: 40px

Then, head over to the Spacing settings and set Margin – Padding as follows,

Hamburger icon spacing values

  • Top and Bottom Margin: 10px
  • Top and Bottom Padding: 0px

After this, go to the Animation settings and chose the No Animation option. That’s it; we’ve placed all of the Divi hamburger menu items for desktop. And this is how they look.

Divi hamburger menu in first attempt without CSS and JS

Not great, right? Some are up, and others are down, not vertically aligned. But our job isn’t done yet. Therefore, to make them vertically aligned and look good, we need to add some code to our column and the row. So, first, go to the Advanced tab of the Row, then Custom CSS, and in the Main Element, paste the following code.

display: flex;
align-items: center;

Vertical alignement CSS for the row

Now, go to the Advanced tab of the 2nd Column in which we’ve placed our menu items. Then open Custom CSS, and in the Main Element, paste the following code,

display: flex;
align-items: center;
justify-content: flex-end;

Once added the code, our menu items will start to look like the below screenshot.

Divi Hamburger Menu First look front end

Step 4: Add a New Row for Slide-in Off Canvas Menu of the Divi Hamburger Menu on Desktop


Simply add another Row with single column under the first one.

Inserted another row for the Divi hamburger menu

Now, go to the Row settings, and apply customizations to each tab one by one mentioned in the subsequent steps.

a) Content Customization of the 2nd Row

For Row’s Content tab customizations, all we need to do is change its background color. So, go to the Background settings, and set the Background color to rgba(224,43,32,0.95).

Divi hamburger 2nd row background tweaks

b) Design Customization of the 2nd Row

Then, go to the Design tab → Sizing, and apply sizing values the same as below,

Sizing values for the Off Canvas and 2nd Row

  • Width: 100%
  • Max Width: 100%
  • Height: 100vh

As soon as you apply these values, the whole canvas will turn red. But, don’t worry, we’ll handle that part later. However, after applying Sizing values, go to the Spacing settings, and set Top and Bottom Padding to 0px.

c) Advanced Customization of the 2nd Row

Once applied value to the Spacing, head over to the Advanced tab → Position Position → select Fixed. And set Z Index to 9999999999. This will cover the entire area of the page as an off-canvas just like the below screenshot.

Red Off Canvas Area

The menu items are behind it. And on this area, we’ll add our close icon and the off-canvas menu items. So, let’s do that.

Step 5: Place Close Icon for Divi Hamburger Menu on Desktop


On the red canvas area, insert a new Blurb module that would be used as the Close icon. Once inserted the module, go to the Image & Icon settings, check Use Icon as YES, and select the below icon.

Divi Hamburger menu Close Icon selection

The close icon for the off-canvas menu has been selected. Let’s tweak its customization in the Design tab.

Close Icon’s Design Customizations

In the Design tab, first, go to the Image & Icon settings, then tweak its appearance the same as below,

Divi hamburger menu's Close icon's image and icon design tweaks

  • Click hover button for Icon Color, then set Desktop color to #FFFFFF and On Hover color to #000000.
  • Image/Icon Alignment: Left
  • Use Icon Font Size: YES
  • Icon Font Size: 40px

Now, go to the Spacing settings, and set the TopBottom Margin to 0px and TopBottom Padding to 10px. After this, go to the Animation settings Image/Icon AnimationNo Animation.

Close icon animation settings

This is it for close icon in the Design tab. Let’s move to the Advanced tab → Then PositionPositionAbsolute.

Position selection for the Close icon

More optoins will appear. So, add the following values to options,

Close icon position values for offset

  • Location: See in the screenshot.
  • Vertical Offset: 10px
  • Click Device button for Horizontal Offset.
  • Desktop Horizontal Offset: 10%
  • Tablet Horizontal Offset: 10px
  • Mobile Horizontal Offset: 10px

Our close icon for Divi hamburger menu on desktop is set. Let’s bring our menu to the off canvas.

Step 6: Insert Off Canvas Menu on Divi Hamburger Desktop Menu


To display a menu on to the off-canvas when the user clicks on the Hamburger icon, we need to insert a Menu module right under the Close icon.

Inserting menu module for slide in off canvas

Then, once the module is added, we need to select which menu we display on the off-canvas. So, to do that, go to the Content tab → Content Menu → select the menu you want to display.

Off Canvas Menu selection

The moment you select a menu, it will appear on the canvas with a white background. As shown in the below screenshot.

off canvas menu with a white bg

But we don’t need a background for our off-canvas menu. Therefore, to remove it, go to the Background settings of the Content tab, and set the background color to rgba(0,0,0,0).

Off Canvas Menu’s Design Customizations

After making menu background color transparent, head over to the Design tab → Menu Text → apply text customization as follows,

Off Canvas Menu text customization A

  • Active Link Color: #FFFFFF
  • Menu Font: Poppins
  • Menu Font Weight: Bold
  • Click hover button for Menu Text Color, and text color Desktop to #FFFFFF, and On Hover to #000000.

Off Canvas Menu text customization B

  • Click device button for Menu Text Size.
  • Desktop Menu Text Size: 40px
  • Tablet Menu Text Size: 30px
  • Mobile Menu Text Size: 30px
  • Menu Line Height: 1.2em
  • Text Alignment: Center

Then further go to the Dropdown Menu settings, and apply customizations as follows,

Off Canvas menu's dropdown menu customizations

Once done with the Dropdown menu, open Sizing settings and Width for the tablet to 80%. Plus, also select center as the Module Alignment.

Off Canvas menu sizing values

Furthemore, open Spacing settings and set TopBottom Padding to 10px.

Off Canvas menu's spacing values

That’s the last step. All our menu items and the off-canvas menu has been created successfully. However, the Divi hamburger menu on the desktop is still not ready to work. And to make it work, we need a little help from JavaScript and Custom CSS. Therefore, the next will help you add a dedicated JavaScript, plus custom CSS, to enable our Divi hamburger menu.

Step 7: Add JavaScrip for Divi Hamburger Menu on Desktop


To add JavaScript to our hamburger menu, we’re going to use the Code module. Insert it in the 1st Row to the 1st Column in which our Logo is placed.

Insert code module for JavaScript

Once added the module, paste the following JavaScript in to the Code field.

Then go to the Admin settings and give the Code module a label, for example, JS. So, you can later easily recognize what module you’ve used for. After that, Save changes.

Step 8: Add Custom CSS for Divi Hamburger Menu


The JavaScript will do its work. But to make our Divi Hamburger menu fully working, we need to add a Custom CSS. Therefore, insert another Code module in the 1st Row, right under the JS module. Then, in the Code field, paste the following Custom CSS,

This is it; we’ve done our 90% task to create the Divi hamburger menu on the desktop. However, to reflect these Custom CSS and JavaScrit’s functionality, we need to assign Class names to our modules, row, and columns. The Next step will help you do that effectively.

Step 9: Assign Class Name to Modules, Row, and the Columns


  • First, go to the Advanced tab of the Hamburger icon (blurb), then open CSS ID & Classes, and paste the following class name in to the CSS Class.

de-menu-ham-icon

  • Then, go to the Advanced tab of the 2nd Row, and paste the following Class name in to the CSS Class.

de-menu-row

  • After row, assign Close Icon the following class name in the CSS ID & Classes settings.

de-menu-close-icon

  • And finally, use the following class name for the Menu.

de-menu

And that’s it; we’ve successfully designed our Divi Hamburger menu for desktop. This is how it looks and works.

Wrapping


By following the above steps, you’d be able to create your own Divi hamburger menu on a desktop, which is modern and functional. But if you need to create different headers, then building a custom header could be time taking. Therefore, to save you time, the Divi Flexile Headers Pack has got over 50 ready to go Divi headers that also include different hamburger menu for Divi desktop just like the below examples,

Each header included is highly customizable, modern, and flexible that can easily fit the Divi website of any design and industry. Moreover, the Divi Flexile Headers pack comes with regular updates. So, each new update will provide you with lots of different headers to make the most out of your Divi menu on both small and large devices.

Get it today, and provide your website visitors easy navigation throughout your site.

Posted By:
Lokesh
With the sharp acumen and logical mind, Lokesh specializes in process analysis, mapping, improvement, requirements gathering, workflow automation, and helping his clients find their place in the ever so competitive business arena.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

11 Top Pro Tips For a Converting Divi WooCommerce Product Page

11 Top Pro Tips For a Converting Divi WooCommerce Product Page

For a digital store, a product page must look admissible and provide users with the required information and excitement to attach their feelings and emotions to the particular product they’re reviewing. It makes it easy for them to reach the decision state from...

How to Make Your Divi Website All Rich Snippets Ready?

How to Make Your Divi Website All Rich Snippets Ready?

Rich snippets or rich results are those snippets that highlight your website’s text or content in the most attentive way in search results. They could be an image, text, video, or more that classifies itself as a part of the Schema Markup. A website optimized for...

How To Speed Up Your Divi Website Without Breaking It

How To Speed Up Your Divi Website Without Breaking It

The speed of your website has a significant impact on user satisfaction and your SEO rankings. It can break or make your business in a few seconds. Because according to the study, it is found that if your website takes more than just 3 seconds to load, then users will...