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
After
Video Tutorial
Table of Contents
Difficulty
Easy
Time
5 Minutes
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
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 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 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 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 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!
0 Comments