More in this series.

We are in the home stretch here and almost done with our awesome menu effect taking that Coded Design and turning it into a Divi Layout. We already have our Divi Mobile Menu displaying on Desktop and today we will bring it all to life with jQuery. I have to say, if you can master just a little bit of jQuery, you can really extend the functionality and overall design of your Divi websites. But enough about my jQuery crush, let’s quickly talk about what we will be doing in this part of the tutorial.

First things first, we need to create the background text and the container it will live in using that Global Header we built in the Divi Theme Builder. Then, we will go in and modify the CSS we added in part 2 of this series to accommodate this change. Lastly, we will add some tasty jQuery to make that background text appear as well as reflect the currently hovered menu item. Tasty jQuery? Man, I really need to reflect on this jQuery crush I’m going through…

Now don’t forget, this is the final installment in a 3 part series, so if you missed parts 1 or 2, take a look at our posts on Building the Hero Section layout and Enabling the Mobile Hamburger Menu on Desktop.

Preview:

After

Video Tutorial

Adding the Background Text to the Global Header

Ok, so for this all to work we need to add a Row to our Divi Global Header that will house the background text that is displayed when menu items are hovered. After we get that done we will modify and add some new code to make it all work, so let’s get jiggy with it right now.

Divi > Theme Builder > Global Header

Background Text Row

Add a Single Column Row > Close the popup to add a Module for now

Row Settings

CONTENT TAB

BACKGROUND
Color: #171717

DESIGN TAB

SIZING
Width: 100%
Max-Width: 2560px;
SPACING
Margin (all): 0px
Padding (all): 0px

ADVANCED TAB

CSS ID & Classes
CSS Class: de-menu-bg-container

With our Row configured, all we need to do is add a Divi Text Module before we put our coder helmet on.

Let’s hit the grey ➕ and add a Text Module.

Text Module Settings

CONTENT TAB

CONTENT
Text (Text View):  

DESIGN TAB

TEXT
Text Font: Yantramanav
Text Font Weight: Heavy
Text Font Style: Uppercase
Text Color: rgba(255,255,255,0.1)
Text Size: 320px
Text Shadow: Option 4
Text Alignment: Center

ADVANCED TAB

CSS ID & Classes
CSS Class: de-menu-bg-text

Modifying the Existing CSS

Ok, so we need to modify some of the CSS we wrote in Part 2 where we showed you How to Enable a Hamburger Menu on Desktop with Divi. 

To get started we need to open up the Global Header we built for our Divi Hero Section in Part 2 of this tutorial, so let’s get right to it.

Divi > Theme Builder > Global Header

CSS Code Module Settings

CONTENT TAB

TEXT
Code: On line 26 that reads .de-burger-menu .opened #mobile_menu1 add , .de-menu-bg-container. After, delete Line 41 that reads background-color: #171717!important;

Our header is now ready to receive the various modules that will make up the content, so let’s quickly build that out.

CSS Code Module Settings

CONTENT TAB

TEXT
Code: Copy and Paste the code below above the <style> tag at the bottom.

Complete CSS

Adding the Divi jQuery to Show the Text

The last step here is to add the jQuery that will make the magic happen and show the hovered menu item text and a nice background for our Divi Hamburger Menu on Desktop.

Column 2 > Add a Divi Code Module > Paste the CSS below between opening and closing <script> tags.

Like a reverse Houdini, poof…text appears

Conclusion

You folks absolutely nailed it! In these 3 parts, we learned that awesome layout and menu effects are not only limited to the code ninjas out there but that we Divi folk can also pull off some incredible designs by just breaking the eye candy down a little bit. We hope that the skills you learned here will be helpful in your other projects!

Oh, and before I forget, you can totally achieve this menu background text effect with Divi Mobile, we loved it so much that we added the feature just for you. Cheat code, on! Check out the video on how to add this background text effect by clicking the button below.

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