Divi MadMenu Header Template #12: Full Screen Menu
The Divi MadMenu Header Template #12 is available for download for all our customers that have purchased the Divi MadMenu extension.
It’s a full screen header layout with the menu opening on the menu hamburger icon click.
This header is created using not only the Divi MadMenu module but other native Divi Builder elements as well consisting of two sections, one of which is the menu bar and the other is the full screen menu.
Just like the Header Template #11, this header template also makes use of the Header Popups feature of Divi MadMenu (you can watch how to create such a header here).
Preview
Main Features
Fullscreen Menu
This menu is a full screen menu covering the entire viewport.
Scrollable Menu Content
The menu content becomes vertically scrollable on smaller screens to prevent it from being cut and thus become unaccessble for the site visitor.
Responsive design
The menu template is designed with responsiveness in mind.
Different Animations Used
The full screen menu is applied different opening/closing animations for each device (for demonstration purposes, you can change that easily in the Divi MadMenu settings).
Register/Account Button
The Register button allows the site visitor to create an account (you need to link this button to the page with the registration form).
The same button becomes the Account button for the logged in user which you can link to the user account page.
Log In/Log Out Button
The Log In 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 Log Out button when the user is logged in allowing the user to log out on click.
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 Download and Install
Please follow this guide about how to download the Divi MadMenu Header Template #12, it is included into the same file 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.
Is there any Accessibility support for the menu system?
Would the Divi Accessibility plugin handle that since there is no special code?
Thank you
Hi Michael.
Thanks for your question. Unfortunately, Accessibility hasn’t been addressed in Divi MadMenu plugin yet, neither had it been tested with the Divi Accessibility plugin, so, I am not sure if it will work for Divi MadMenu, that needs to be tested. If you are asking about this particular menu template (the Full Screen menu), apart from Divi MadMenu, it is also using normal Divi sections, rows and core modules, so, the Divi Accessibility plugin should mostly work for it, just like for any other Divi layout.