Divi MadMenu Header Template #11: Horizontal Slide-In Menu
The Divi MadMenu Header Template #11 is now available for download for all our customers that have purchased the Divi MadMenu extension.
It’s a horizontal header layout with the horizontal menu bar sliding in from top on the menu hamburger icon click.
Unlike the first 10 header layouts this header is created using not only the Divi MadMenu module but other native Divi Builder elements as well thanks to the Header Popups feature update released recently.
Preview
Main Features
Horizontal Slide-In Menu
Clicking the hamburger icon reveals the horizontal menu sliding in from top.
Close on outside click
The Slide-In horizontal menu and the mobile dropdown menu close if you click somewhere outside of their boundaries.
Menu close button
The Slide-In menu has a Close button (the X button) for closing the menu.
Horizontal menu on all devices
The horizontal(desktop) menu is enabled on all devices.
Responsive design
The menu template is designed with responsiveness in mind.
Different menus for each device
The horizontal(desktop) menu is assigned different menus for each device(desktop and phone), you’ll need to create those menus in the Appearance->Menus.
Both desktop & mobile menus enabled
Both the Desktop and Mobile Menu elements are enabled on mobile devices.
Toggle mobile submenus on click
The mobile menu nested menu items are expanded/collased by clicking the parent menu item’s arrow icon.
Accordion mode enabled
The Accordion Mode is enabled for the mobile submenus allowing to have only one expanded submenu at a time.
No Custom Code Used!
This header template does not use any custom code. It is fully customizible using the Divi MadMenu settings (and other Divi Builder elements used) in the Divi Theme Builder.
How To Download and Install
Please follow this guide about how to download the Header Template #11, it is included into the same file with the rest of the Divi MadMenu header layouts.
The installation of this header template is different from the installation of the previous 10 header layouts (which you first need to import into the Divi Library and then add to the header template as a section from the library).
This header template should be imported into the Divi Theme Builder as a new template, please follow this guide about how to import Divi Theme Builder templates.