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.
Art On The Run
Art On The Run is a film scholl based in Berlin. Vertical navigation mixed with a custom hover effect.
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!
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.
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!
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.
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.
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 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.
