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