Vote Divi Mobile for Desktop Menu President!

Yeah, you read that right. Consider this our declaration that Divi Mobile is not just for giving your Divi Mobile Menus the makeover they deserve, Divi Mobile is running for the defacto President of Divi Desktop Menus also! Many of us out there were given a name at birth that did not quite suit us as we matured and Divi Mobile is no different.

Today we are going to prove it by showing you one of Divi Mobiles’ newest features taken from a tutorial series we just completed, so if you want to duke it out with some code instead, check our Coded Design to Divi Layout tutorial.

More in this series.

Just like a cheat code for your favorite video game, Divi Mobile unlocks tons of additional features for both your Desktop and Mobile Divi Menus which are so awesome that it is basically cheating. I’m telling you, I almost feel bad each time I use it, but only almost. Some core features like adding various animation styles to your Divi Hamburger Menu Icon or Injecting Divi Layouts directly into your Divi Menu have long been a reason why people keep buying the plugin, but not many know how easy it is to use the plugin to design your Desktop Menus. Not only that, we just added an awesome feature that found its beginning as a reddit post, which is to add the Hovered Menu Text as a Text Background.

For this tutorial, we will assume that you already created a menu you’d like to use and that you have Divi Mobile installed and activated.

If you want to take this effect of a test drive, just click the button below to see it in action in our latest FREE Layout Pack for Divi Machine.

Preview:

Before
Regular Divi Menu
After
Adding a Background Text Hover Effect to Divi Menu - After

Video Tutorial

Display Divi Mobile Menu on Desktop

Getting your mobile Divi Menu to display on desktop screens could not be simpler. We will take a step further and have the menu display fullscreen on those devices so that we can showcase a few of Divi Mobiles’ shiniest features. We will be working in the Theme Customizer, so you can either access that from the frontend of your Divi site as long as you are logged in, or you can get there from the WordPress Dashboard as we’ll do below.

Let’s go!

Divi > Theme Customizer

Divi Mobile Settings

This will load the frontend of your site with the Customizer Settings on your left, so now we need to open the Divi Mobile General Settings.

Customizer > Divi Mobile > General

Divi Mobile Settings

General Settings

Select Primary Menu Movement: Expand from outside screen
Expand From Outside Screen Style: Fullscreen Slide Down (or other fullscreen option)
Divi Mobile Breakpoint: Max (5000px)

That Divi Mobile Breakpoint setting is what will force the Divi Mobile Menu to be displayed on Desktop screens.

Styling the Divi Mobile Menu Header Elements

Now that we will have a Fullscreen Divi Mobile Menu that displays on Desktop screens, we need to style the various header elements. Divi Mobile has you covered with all the settings for things like the Header Logo, Colors, Header Icons, and more. We will focus on the logo, hamburger icon, and some of the colors for this tutorial.

Customizer > Divi Mobile > Custom Header

Divi Mobile Custom Header Settings

Divi Mobile Settings

Custom Header Settings

Custom Header

Create a Custom Header: Yes
Custom Header Logo: icon.png
Logo Max Height: 50px
Custom Header Background Color: Transparent

Custom Header Elements

Logo Link: /
Logo Position from the edge: 20px

Custom Header Elements

Fixed Menu on Scroll: NO

Styling the Burger Menu Icon

This is seriously one of my favorite parts when using Divi Mobile on a project. Under the Burger Menu settings, you can completely style the Divi Hamburger Menu icon any way you want, add animations, different colors, and so much more. I told you that you’d feel like a cheater!

Let’s finesse this a little.

Customizer > Divi Mobile > Burger Menu

Divi Mobile Burger Menu Settings

Divi Mobile Settings

Burger Menu Settings

Burger Menu Icon

Burger Menu Closed Color: #171717

Burger Menu Background

Burger Menu Background Color: Transparent

Burger Menu Background Shadow

Burger Menu Background Shadow: Transparent

Customizing the Divi Menu Content Style

We are crushing it so far and we are almost done. Yes, already, just a couple more steps. Under the Menu Style settings, you can customize the look of the content in your menu. You can select fonts, colors, positions, and more.

Customizer > Divi Mobile > Menu Style

Divi Mobile Menu Style Settings

Divi Mobile Settings

Menu Style Settings

Space at the Top of the Menu: 80px
Menu Background Color: #171717
Menu Text Font Weight: 800
Menu Text Line Height: 1em
Menu Text Transform: Uppercase
Menu Text Color Hover: #f1c40f
Active Menu Text Color: #f1c40f
Menu Text Font Size: 34px

Adding Hovered Divi Menu Link as Background Text

Last stop, the latest feature added to our Divi Mobile menu plugin that lets you transform boring Mobile and Desktop menus into masterpieces. In just a couple of quick settings, we will add that background text effect we showed you at the beginning of this tutorial.

Let’s wrap this up, folks!

Customizer > Divi Mobile > Fullscreen Menu Style

Divi Mobile Fullscreen Menu Style Settings

Divi Mobile Settings

Fullscreen Menu Style Settings

Extra Appearance Options

Extra Appearance Options: Menu name behind item on hover

Extra Appearance Font Settings

Font Family: Yantramanav
Font Weight: 800
Text Transform: Uppercase
Extra Appearance Font Size: 200px
Extra Appearance Font Color: rgba(255,255,255,0.1)

Wanna win? Join the Team…

Conclusion

There you have it, a quick rundown of how you can use Divi Mobile to enhance both your Desktop and Mobile Divi Menus. What takes an hour or so with custom code as demonstrated in our Coded Design to Divi Layout tutorial, can be done in under 10 minutes with Divi Mobile. Now that is efficient.

Definitely drop your comments below and let us know what you thought and whether you’d like more of this type of content!