Create Better Divi Headers

Divi MadMenu Header Template #13: User Account Menu, Popup Login Form and More

by | Oct 31, 2021 | 0 comments

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

N

Centered Logo

Logo is positioned in the middle of the main menu bar.
N

Horizontal Menu On Mobile

Horizontal menu is enabled on mobile devices.
N

Slide-In Social Icons

Social icons slide in from left when you click the social networks button.
N

Slide-In Search Form

Search form slides in from top when you click the search button.
N

Horizontal Slide-In Main Menu

The horizontal main menu slides in from top when you click the hamburger menu button.
N

User Account Button

The Account button allows the user to access the user account menu.
N

Login Form (Popup)

Login form popup is displayed when a logged out user clicks the Account button allowing the user to log in to his/her account.
N

User Account Menu (Slide In)

The user account menu slides in from the right when the logged in user clicks the Account button.
N

Logout Button

The user account menu has a logout button allowing the user to log out.
N

Responsive Horizontal Menus

Different horizontal(desktop) menus are assigned for Desktop, Tablet and Phone devices.
N

Responsive Mobile Menus

Different dropdown(mobile) menus are assigned for Tablet and Phone devices.
N

Collapsed Mobile Submenus

The mobile submenus are collapsed and can be toggled by clicking the parent menu item.
N

Accordion Mode Enabled

The Accordion Mode is enabled for the mobile submenus allowing to have only one expanded submenu at a time.
N

Fixed Header Enabled

Fixed header is enabled on all devices.
N

No Content Overlap

Fixed header does not overlap the page content.
N

Close On Outside Click

Menus, search form and social icons close on outside click.
N

Responsive Design

The menu template is designed with responsiveness in mind, it looks great on any screen width.
N

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.

And the User Account Menu slides in from right when the logged in user clicks the same Account button.

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

Follow this guide about how to download the Divi MadMenu Header Template #13, it is included in the same package with the rest of the Divi MadMenu demo header layouts.

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.

View Live Demos & Get Divi MadMenu

Download FREE Divi Sections

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!