← View all DiviWP Sections

Divi Header Layouts

20 x Divi Header Layouts with normal and Sticky options for each section.

View demos below ↓

DiviWP’s Header Section Layouts use the built-in Divi Menu Module for logo and menu functionality along with combinations of Blurb Modules, Button Modules and Social Follow Modules for secondary Menu content.

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.

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

Course listing

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

Course listing

 

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!

 

Course listing

 

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.

Course listing

 

 

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:

 

 

 

Course listing

 

 

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

Course listing

 

 

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.

Course listing

 

 

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.

Course listing

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.

 

Read more reviews

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Top Row 4 columns with Blurb Modules
  • Menu Module Row features as per Menu Header 13
  • Top Row 4 columns with Blurb Modules
  • Menu Module Row features as per Menu Header 13
  • 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
  • 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
  • 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
  • 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