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
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 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?
Let’s see How to Recreate this
And Now let’s see how to achieve this same thing on your Divi website. All you’ve to do is simply enter your Name and Email in the form below and click on the Submit button then you’ll see Download Layout button just download the layout.
After Downloading you’ll need to extract the .Zip file in 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 Module 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!
Make Beautiful websites with ease using our Handmade Beautiful Child Themes
If you found this tutorial helpful, why not buy me a Coffee which really gives me more energy to make more Tutorials Like this.
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
You would also like one from these
In today’s’ tutorial, we’ll see how to create a very modern and next level Stretchy navigation in Divi. It works like a charm on any Screen Size with beautiful Animations and more.
Creating a Beautiful Comparison Table is super duper easy by following this tutorial. This Pricing table has so many functionalities like Sticky Element and Read More Functionality and more.
Hey Everyone, what's going on? It's been a long time haven't posted any tutorial, but today I've got a special tutorial that'll fix your problem with the Divi Shop Module. Yeah, the Divi Shop Module is very limited because you only have 3 things to show such as...