• a

NEW & POPULAR DIVI CHILD THEMES

Supreme Store

Molti

Molti Ecommerce

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Supreme Store

Easily Setup Your Online Store with Supreme Store Child Theme.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti

Multipurpose Business Child Theme for Divi.

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.

How to Create Stretchy Navigation in Divi

Samar Jamil

Hey Everyone, what’s up?

Today we’re going to create something really creative in Divi. And using it you can easily showcase your Menu Items in a very cool and modern way. It’s called Stretchy Navigation and that’s what we’re going to create in this tutorial.

Sneak Peak

Here’s a quick look at what we’re going to create in today’s article. You can see that it works like a charm. It comes with a really nice Hamburger Animation that reveals the Menus Items on click with a very smooth animation. And It’s sticky which means it will stay on top even if you scroll down. You’ll also see a beautiful Tooltip showing on Hover on each menu item!

Desktop

Mobile

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 the Download Layout button just download the layout.

After Downloading you’ll need to extract the .Zip file on your PC after extracting you’ll get a .json file. All you’ve to do is go to Divi -> Theme Builder -> Edit/Build Global Header.

Once you’re in the Divi Builder, you can now click on Portability Icon at the bottom.

You’ll see a window pops up, simply click on Import Tab, and then in the Select field choose the extracted .Json file you may click Override existing content Checkbox to remove the existing content and have this new one.

It’s done, you’ve just Imported the Layout to your Header you’ll see the content in Divi Builder like this but you don’t need to worry because it will work fine on frontend.

Ok That’s it, you’ve now got a nice-looking Header with a next-level Stretchy Navigation that looks so cool.

How to Edit the Dropdown Icon

You can go to Wireframe view to access the Code module in which I’ve added all the codes including HTML, CSS, and JS. You can go to the Module Settings Labeled “Hamburger Icon – Contains All Codes in it“. This is where you’ll find all the Codes if you want to edit something.

Where to edit the Dropdown content?

To edit the Dropdown content, I’ll recommend you to go to Layers View for a better understanding. And then you’ll see the last 2 Sections that contain the Dropdown content first one is the actual Header with Menu Module and Button. The 2nd section is what you’ll see on a Desktop and 3rd section is what you’ll see on Mobile/Tablet 

To edit the dropdown content you’ll need to expand the Section, then expand Row and you’ll see 4-5 Image Modules you can then you can go to that Image Module to change the Icon to whatever you want.

How to edit the Icon label shown on Hover as a Tooltip?

If you want to change the Menu Item from something like Blog to About then you’ll simply change the Image by going to Image module but to Edit the Label shows on Hover you’ve to go to that Image Module Settings -> Advanced -> Custom CSS -> After and choose Hover Tab. And then in the first field that says content is where you can change the label within the apostrophe.

So that’s it for today’s awesome and creative tutorial. Please let me know what you think about this creative idea to show your Menu Items in a very creative way. I hope that you found it useful.

Have a great day!

Credit

Hamburger Animation: https://codepen.io/ainalem/pen/LJYRxz

Idea: https://codyhouse.co/gem/stretchy-navigation

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!