Divi MadMenu Header Template #13: User Account Menu, Popup Login Form and More
Divi MadMenu Header Template #13 has been released and is available for download for all our customers that have access to the Divi MadMenu extension.
This header template features social icons, search form, horizontal slide-in menu, popup login form and a vertical user account menu.
Main Features
Centered Logo
Horizontal Menu On Mobile
Slide-In Social Icons
Slide-In Search Form
Horizontal Slide-In Main Menu
User Account Button
Login Form (Popup)
User Account Menu (Slide In)
Logout Button
Responsive Horizontal Menus
Responsive Mobile Menus
Collapsed Mobile Submenus
Accordion Mode Enabled
Fixed Header Enabled
No Content Overlap
Close On Outside Click
Responsive Design
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 Customize
The header template #13 comes with a tutorials series showing how to create this header template from scratch step by step.
There are five tutorials each explaining how to create a specific part of the header in detail.
These tutorials will help you better understand how to use the Divi MadMenu and get the most out of it, so, it’s highly recommended to do them all thoroughly.
You can start with Part 1 and do all the tutorials one by one, or you can do only the tutorial you need by downloading the previous tutorial’s template JSON file at the beginning of the tutorial and continue from where it was left in the previous part.
Part 1: Main Menu Bar
In the Part 1 you will create the main menu bar of the header template .
Part 2: Horizontal Slide-In Menu
Part 2 shows how to create the horizontal menu sliding in from top when the user clicks the Menu button.
Part 3: Login Form and User Account Menu
Part 3 shows how to create the Login Form and the User Account Menu parts of the header template.
The login form shows up as a popup when the logged out user clicks the Account button of the main menu bar.
Part 4: Slide-In Social Icons
Part 4 shows how to create the social icons section that slides in from left when you click the social networks button on the left side of the header.
Part 5: Search Form
In the Part 5 (the final part) you’ll see how to add the Search Form to the header that slides in from top when the user clicks the header search button.
How To Download and Install
This header template is a Divi Theme Builder template, so, it should be imported into the Divi Theme Builder as a new template, please follow this guide about how to import Divi Theme Builder templates.