Main Features
Centered Logo
Logo is aligned in the middle of the header bar on Desktop and Tablet devices.
Evenly Aligned Elements On Phone
Header elements aligned evenly on Phone devices.
Mobile Menu Toggle Label Enabled
The mobile menu toggle(hamburger icon) is set the Menu and Close labels for the closed and opened dropdown menu states respectively.
Dropdown Menu Placement
Mobile dropdown menu is attached to the menu toggle(hamburger menu) on Tablet, but is positioned in the middle of the header on Phone.
Different Animations Used
The mobile dropdown menu is applied different opening/closing animations on Tablet and Phone devices.
Fullwidth Dropdown Menu On Phone
Mobile dropdown menu is full width on Phone.
Search and Cart Enabled
Search and Cart elements are both enabled.
Menu CTA button
A CTA button is enabled.
Elements Responsive Ordering
Header elements ordered differently on the Phone device.
Small Logo Used On Phone
A small version of the logo is used on the Phone menu to save space on smaller screens.
Responsive Design
The menu template is designed with responsiveness in mind, it looks great on any screen width.
Custom Image Icons Used
Custom image icons used for the header elements.
Collapsed Mobile Submenus
The mobile submenus are collapsed and can be toggled by clicking the parent menu item.
Accordion mode enabled
No Custom Code Used!
This demo layout does not use any custom code. It can be fully customized using the Divi MadMenu settings (and other Divi Builder elements if any used) like any other Divi layout.