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 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.

Divi Tutorials on custom navigation:
A range of Divi Menu tutorials from Geno Quiroz
Divi Nation Short: 3 Super Simple Divi Header Modifications
How to Add Labeled Dot Navigation to Elegant Themes’ Free 10th Anniversary Timeline Layout
How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling.
Styling Divi’s Fullscreen Menu

Divi Plugins for custom navigation:
Mhmm (Mighty Header & Menu Maker)
– Mobile Menu Customizer
– Divi Mega Menu | Quadmenu
Divi Mega Menu
Hamberger Menu Styles

Divi Child Themes with custom navigation:
Solar Divi Child Theme
Hope Divi Child Theme
Gradeo Divi Child Theme
Mason Divi Child Theme
Maveros Divi Child Theme
Elevate Divi Child Theme

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: Some links on this page may contain affiliate codeand 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 be helping to keep this website a forever free resource for the Divi community.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close