Main Features
Centered Logo
Logo is positioned in the middle of the main menu bar.
Horizontal Menu On Mobile
Horizontal menu is enabled on mobile devices.
Slide-In Social Icons
Social icons slide in from left when you click the social networks button.
Slide-In Search
Search form slides in from top when you click the search button.
Horizontal Slide-In Main Menu
The horizontal main menu slides in from top when you click the hamburger menu button.
User Account Button
The Account button allows the user to access the user account menu.
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.
User Account Menu (Slide In)
The user account menu slides in from the right when the logged in user clicks the Account button.
Logout Button
The user account menu has a logout button allowing the user to log out.
Responsive Horizontal Menus
Different horizontal(desktop) menus are assigned for Desktop, Tablet and Phone devices.
Responsive Mobile Menus
Different dropdown(mobile) menus are assigned for Tablet and Phone devices.
Collapsed Mobile Submenus
The mobile submenus are collapsed and can be toggled by clicking the parent menu item.
Slide Submenus
The Slide Right style is enabled for the collapsed mobile menu submenus.
Fixed Header Enabled
Fixed header is enabled on all devices.
No Content Overlap
Fixed header does not overlap the page content.
Close On Outside Click
Menus, search form and social icons close on outside click.
Responsive Design
The menu template is designed with responsiveness in mind, it looks great on any screen width.
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.
Download or Create It Yourself
You can download this header template and start using it immediately, this will save you some time. Or you can create it yourself if you would like to learn how it’s done.
This header template comes with a tutorials series showing how to create it step by step. There are 5 parts each explaining how to create a certain part of the header in detail.