The header spans the entire screen width.
Evenly Aligned Desktop Menu Items
Desktop menu items aligned evenly occupying all available space horizontally.
The menu template is designed with responsiveness in mind, it looks great on any screen width.
Fullwidth Dropdown Menu On Phone
Mobile dropdown menu is full width on phone devices.
Dropdown Menu Placement
Mobile dropdown menu is attached to the menu toggle(hamburger menu) on desktop, but is positioned in the middle of the header on mobile devices.
Collapsed Mobile Submenus
The mobile submenus are collapsed and can be toggled by clicking the parent menu item.
Accordion Mode Enabled
The Accordion Mode is enabled for the mobile submenus allowing to have only one expanded submenu at a time.
Log In/Account Button
The Log In (Join Now) button allows the logged out user to log in(you need to link this button to the page with the log in form).
The same button becomes the Account button when the user is logged in allowing the user to access the user account page(you need to link this button to the account page).
Elements Responsive Ordering
Header elements ordered differently on Phone.
Custom Image Icons Used
Custom image icons used for the header buttons on mobile.
Custom Menu Breakpoint
Both the desktop and mobile menus are set a custom breakpoint of 1180px.
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.
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.