Looking for inspiration to customize your Divi header navigation?

It has been a long running request within the Divi community and Divi Facebook groups for Elegant Themes to add more flexibility and options to the navigation and header. We currently have a few different options to customize the header via the Divi theme customizer, but hopefully there will be many more in future updates now that the Divi 3.1 developers API work has been released.

Divi comes with 5 main navigation layouts: Default, Centered, Centered Inline Logo, Slide-in, and Fullscreen.

Whilst the Divi Theme does come with these built-in customization options in the Divi Theme customizer. you may need to get a little creative with some CSS, PHP or use one of the 3rd party Divi plugins to create a truly unique custom Divi navigation.

Below are a few examples of what can be achieved by customizing the Divi header navigation:

Gruissan


Gruissan
is a tourism website for the town of Gruissan in the south of France, that uses hand-drawn menu icons and slide down menus below the header video.

divi custom navigation with icons

Art On The Run

Art On The Run is a film scholl based in Berlin. Vertical navigation mixed with a custom hover effect.

customized divi theme vertical navigation

The Generation

The Generation is a web design agency based in Stockholm. The previous design of this Divi website was a finalist in the 2016 Elegant Themes Divi Showcase competition. This is even better!

customized divi slide in menu

National Infantry Museum

National Infantry Museum is a museum to honor the legacy and valor of the U.S. Army Infantryman developed by Geno Quiroz. Geno has a range of navigation tutorials which are included in the resources at the end of the post, including how to achieve the logo swap and square menu items as in this site.

square divi navigation backgrounds

London Fight Factory

London Fight Factory is a martial arts gym in London developed by Divi Den. The 2 call to action buttons in the header are just screaming to be clicked and the animated logo just looks cool!

custom header and navigation for divi theme

MJ Studios

MJ Studio is an web design studio based in Pakistan. Their menu uses icons and custom hover effects and an animated call to action button.

divi custom navigation icons and call to action

FightMND

FightMND is an Australian not-for-profit organisation building awareness and funding research on Motor Neurone Disease (MND). Bold yellow buttons with icons in the secondary Divi menu maby a bit too much for some, but i think it works.

 divi custom navigation fight mind

Julie Ferneau

Julie Ferneau is a Destination Wedding and Lifestyle Photographer based in San Diego, California. A few subtle styling customizations can make all the difference.

divi custom navigation finance site exampledivi header customization wedding example

Divi custom navigation resources

If these sites with custom navigation have inspired you to give your own sites navigation a makeover, the following resources will give you a helping hand.

Check out our post on adding mega menus to Divi which list the 4 best plugins to add multiple menu items across columns in your navigation.

Do you have any more great Divi custom navigation examples?

Drop your website examples in the comments below or submit to the Divi Theme showcase on Divi Theme Examples. Happy blogging 🙂

Affiliate Disclosure: Links on this page may contain affiliate code which means the owner of this website will be paid a commission on any sales that result from purchases made via these links. If you choose to purchase via links on Divi Theme Examples you will never be charged any extra and you will be helping to keep this website a forever free resource for the Divi community.