Divi Header Layouts
20 x Divi Header Layouts with normal and Sticky options for each section.
All DiviWP Headers are compatible with Stick-to-top Scroll Effects as well as Fixed Positioning. Everything is editable via the Visual Builder and fast efficient support is on-hand should you require it.
View the documentation for DiviWP’s Header Layout Sections →
We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.
These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.
FEATURES
Mobile Menu Transitions
Sticky and Fixed Compatibility
Desktop Menu Transitions
2 and 3 column Mega Menus
Top Secondary Rows
Menu and Code Modules Included
Easily Customizable
5-star rated
Stunning Mobile Menu Transitions and Auto Collapsibility
All Headers, with the exception of Header 4, use a stunning fade-in mobile menu transition when the hamburger is touched on tablet and mobile devices.
Automatically collapse submenus and interact with them via a customizable toggle
All headers automatically collapse submenus via a circular toggle while keeping the parent item clickable and linked.
In this visual representation in the image above, the highlighted area in blue will link to the /page-layouts/ URL while the green area toggles the sub-menu.
An alternative solution is available which removes the parent link to make the entire parent row toggle it’s submenu.
In this visual representation, the highlighted are in green toggles the sub-menu. See demo →
Slide-in Option
Header 4 demonstrates an alternative slide-in transition
Sticky and Fixed Compatibility
All DiviWP Header Sections are compatible with the newly released Stick-to-top Scroll Effects as well as Fixed Positioning.
In fact, all the headers have demos of the newly released Sticky functionality built into the Divi Builder!
On mobile, the mobile menu handles long nested submenu easily and beautifully. You could even hide the top row if you wanted!
Beautiful Header Transitions
Each Header uses a beautiful fade-in transition on desktop devices.
The top line color and caret triangle are all customizable (or removable).
Cart and Search icons are customizable or you can switch them off in the module settings.
Dark Background Compatible
We’ve provided a few dark color scheme options (Headers 5 and 6)
You’ll be able to customize colors and fonts using the “Modified Styles” filter of the Menu Module. More on that below.
2 and 3 column Mega Menu drop-down options
Header 13 includes a beautiful 2-column mega-menu design and an optional fullwidth menu item button.
Header 14 includes a 3 column design and an optional fullwidth menu item button:
Top Secondary Rows to experiment with
We’ve included a selection of top secondary Row designs to display secondary content such as Social Media Follow Modules, Button Modules, Blurb Modules and Menu Modules.
Tablet and Mobile Views
Divi Menu Modules and separate CSS and jQuery
Each Header Section includes a Custom CSS Code module and a Custom jQuery Code Module.
This is important because you can experiment with these headers without worrying that you’re going to break your existing headers!
You’re always in control and can easily turn on or off the CSS or jQuery or copy it into your child theme or Divi Theme Options.
Customizable
The most efficient way to change colors is via the ” Modified Styles” filter.
To filter by Modified Styles, click the “+ Filter” button and then select “Modified Styles”.
This will bring up all the modified font, color, size etc settings for you to edit and experiment with.
Versioning and Updates
When updates takes place to the Custom CSS or jQuery modules, new versions will be released for download. You can then import the new version and copy/paste the contents of the Custom CSS or jQuery.
5-star Rated Product & Support
We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.
These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.
Header Section 1
- Right-aligned Menu Module
- Fade-in drop-down menu transitions for desktop
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 2
- Right-aligned Menu Module
- Fade-in drop-down menu transitions for desktop. Mega-menu styling demo.
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 3
- Menu centered with last two items aligned right via custom menu class
- Button CSS via custom menu class
- Fade-in drop-down menu transitions for desktop.
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 4
- Menu centered with last two items aligned right via custom menu class
- Button CSS via custom menu class
- Fade-in drop-down menu transitions for desktop. Mega-menu styling demo
- Slide-in mobile menu transitions for tablet / mobileFade-in drop-down transitions for tablet and mobile sub-menu
- Grouped sub-menu toggle for tablet / mobile with parent menu item not linked
Header Section 5
- Right-aligned Menu Module on dark background section
- Fade-in drop-down menu transitions for desktop
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 6
- Right-aligned Menu Module on dark background section
- Sub-menu dark background styles
- Fade-in drop-down menu transitions for desktop
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 7
- 3/4 – 1/4 row column
- Button Module in 1/4 column and alongside hamburger for tablet / mobile
- Fade-in drop-down menu transitions for desktop.
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 8
- 3/4 – 1/4 row column Fade-in drop-down transitions for tablet and mobile sub-menu
- Social Media Follow Module in 1/4 column and alongside hamburger for tablet / mobile
- Fade-in drop-down menu transitions for desktop.
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 9
- Top Row Single Column with Blurb Modules and Social Media Follow Module
- Aligned via Custom CSS Code module using flexbox
- Menu Row features as per Menu Header 1
Header Section 10
- Top Row Single Column with Menu Module and Social Media Follow Module
- Aligned via Custom CSS Code module using flexbox
- Menu Row features as per Menu Header 1
Header Section 11
- Top Row Single Column with Blurb Module and Social Media Follow Module and Button Module
- Aligned via Custom CSS Code module using flexbox
- Menu Row features as per Menu Header 1
Header Section 12
- Top Row Single Column with Social Media Follow Module and Blurb Modules
- Aligned via Custom CSS Code module using flexbox
- Menu Row features as per Menu Header 1
Header Section 13
- Top Row Single Column with Blurb Module, Menu Module, Social Follow Module and Button Module
- Aligned via Custom CSS Code module using flexbox
- Right-aligned Menu Module Row
- Fade-in drop-down menu transitions for desktop
- 2 column mega menu styling for desktop
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 14
- Top Row Single Column with Blurb Module, Menu Module, Social Follow Module and Button Module
- Aligned via Custom CSS Code module using flexbox
- Right-aligned Menu Module Row
- Fade-in drop-down menu transitions for desktop
- 3 column mega menu styling for desktop
- Fade-in mobile menu transitions for tablet / mobile
- Grouped sub-menu toggle for tablet / mobile with parent menu item linked
Header Section 15
- Top Row 4 columns with Blurb Modules
- Menu Module Row features as per Menu Header 13
Header Section 16
- Top Row 4 columns with Blurb Modules
- Menu Module Row features as per Menu Header 13
Header Section 17
- Top Row Single Column with Social Media Follow Module and Blurb Modules
- Aligned via Custom CSS Code module using flexbox
- Menu Module Row features as per Menu Header 13
Header Section 18
- Top Row Single Column with Social Media Follow Module and Blurb Modules
- Aligned via Custom CSS Code module using flexbox
- Menu Module Row features as per Menu Header 13
Header Section 19
- Top Row Single Column with 2 Blurb Modules, Button Module and Social Media Follow Module
- Aligned via Custom CSS Code module using flexbox
- Menu Module Row features as per Menu Header 3
Header Section 20
- Top Row Single Column with 2 Blurb Modules, Button Module and Social Media Follow Module
- Aligned via Custom CSS Code module using flexbox
- Menu Module Row features as per Menu Header 3
