a

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

Duplicating the Google Apps Dropdown Menu in Divi

Samar Jamil

Hey Everyone, what’s going on?

Here I’m presenting another great Tutorial for you, this time I’ve created something Googly. It looks Amazing on Desktop and Perfect on Mobile. And using it you can easily display your Products Same as Google’s Dropdown menu. Yup, I’ve been working on this thing for a whole week to make it look perfect on all devices

Sneak Peak

Here’s a quick look at what we’re about to create today, you can see it’s just mind-blowing. You’ll get a complete header layout with Fixed functionality mean your header will stay always on top even if you scroll and you’ll not need to worry about the Header Overlap issue too because there’s a separate JS code to fix this issue added to the File you’ll download. And It works perfectly on All Devices too. Awesome right?

Desktop

Mobile

Video Tutorial

Let’s see How to Recreate this

And Now let’s see how to achieve this same thing on your Divi website. First download the layout by clicking the Download link above. After Downloading you’ll need to extract the .Zip file on your PC after extracting you’ll get 3 Files, first open up the Style.css file in any text editor and copy all the CSS from there and then paste it to Divi -> Theme Options -> Custom CSS Box

Now you’ll need to open up the js.js File using any text editor and then copy all the code from there and paste it to Divi -> Theme Options -> Integration -> Add code to the head of your blog box and make sure to click on Save Changes button to save all the changes.

Alright, you’re done with adding all the codes to their positions now you’ll need to add the Header Layout using the Theme Builder, to do it simply go to Divi -> Theme Builder -> and Edit Global Header. If you haven’t already created a Global Header then you may click on Add Global Header and then click on Build Global Header.

So now you’re editing/building the Global Header, what you need to do is drag the .json file from the Package you downloaded and paste it to the Divi Builder

Ok That’s it, you’ve now got a nice-looking Header with Fixed functionality on scroll + Google Style Dropdown Menu and a CTA button as well.

How to Edit Dropdown Items

To edit the Dropdown Menu Items you’ll need to enable the Wireframe View and then you’ll find a section named “Google Dropdown content” and then you’ll see so many Blurb Modules simply edit them according to your need.

I hope you found it helpful and useful for your upcoming Project. Let me know what you think about this Google Inspired Dropdown in the Comments Section below. I’d love to hear something from you. 

Have a great day!

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Theme Customization

Customer Showcase

What's New?

Our Blog

Useful Tools

Affiliates