GLOBAL DIVI CUSTOM HEADER
12 premade custom DIvi header designs to choose from.
Divi Ultimate Header Plugin allows you to replace the default Divi header & navigation globally with one of our premade custom Divi header design in a single click. This is a great start to design a website that doesn’t look like the same old Divi website. Plus, you can also make the custom menu sticky / fixed on scroll. Want to see it live in action? This website uses one of the premade custom Divi header design. See it in desktop for full design. In mobile view, it will revert back to use the default Divi header. This is particularly useful if you wish to have fullscreen or slide in menu in mobile only.
EDIT IN DIVI BUILDER
Edit the logo, color, etc. right in the Divi Builder.
After you choose your desired Divi header styling in the Theme Customizer, you can then proceed to the Divi Library to edit the custom Divi header design right in the Divi Builder. You can add new modules, change the layout, logo, color , etc. If you wish to create a totally custom Divi header design (apart from our premade header design), you can always use our premade one as a starter design & customize it to your liking & set it as the custom header styling in the Theme Customizer.
STICKY / FIXED MENU
Easily make your menu section to be sticky / fixed.
In Divi Ultimate Header Plugin, we added a custom sticky JS to allow you to easily make your menu section to be sticky with a CSS Class. Our custom sticky JS supports up to 5 different sections to be sticky on top of each other. To see it in action, check out this website / demo site on desktop view.
SLIDE IN / FULLSCREEN MOBILE MENU
More variety for your mobile menu.
In mobile, Divi Ultimate Header Plugin will revert back to use the default Divi mobile header, so that you can have slide in / fullscreen menu in mobile. Though, you can still have custom header elements below the default Divi mobile header. If you choose to use Divi Builder for your mobile menu, you can only get to have the default slide down style. And that’s why we came up with this way, so that you can more variety to your mobile menu.
MENU HOVER STYLE
Choose a premade hover style for your menu.
Divi Ultimate Header Plugin also allows you to add hover effect to the fullwidth menu in a single click. You can easily tweak the hover effects & the colors right in the Theme Customizer. No CSS code required. Want to see it live in action? Take a look at the menu on this website. We used one of the premade menu hover style, which added a line animation hover effect to the fullwidth menu. Also take a look at the demo site with different hover styles set.
SEARCH ICON IN MENU
Ability to add search icon in the fullwidth menu.
In fullwidth menu module, Divi 3.0 doesn’t allow you to have search button in it. This limits the creativity of designing a custom header. But Divi Ultimate Header plugin solved this issue by allowing you to add the search button to your fullwidth menu module in a single click. Take a look at the fullwidth menu module at this website on desktop view. You will see a search icon in it. Try to click on it to reveal the search container. It’s similar to how the default Divi search icon function.
CART ICON IN MENU
Add WooCommerce cart to the fullwidth menu.
In fullwidth menu module, Divi 3.0 doesn’t allow you to have WooCommerce cart icon in it. This limits the creativity of designing a custom header. But our plugin solved this issue by allowing you to show the cart icon in your fullwidth menu module in a single click. We also added elegant cart count in the menu. Want to see it live in action? Take a look at this website menu in desktop. You will see a shopping cart icon with item count.
NEW REGULAR MENU MODULE
Opens up tons of possibilities for designing custom header.
By default, Divi 3.0 only has fullwidth menu module, which you can only place it in it’s own separate fullwidth section. But with Divi Ultimate Header Plugin v2.0, we added a new regular menu module, which allows you to have menu module inside a regular section / row. With this new regular menu module, it opens up tons of possibilities for designing custom header using Divi Builder. Check out our premade header style 6 – 10 to see how we utilize this new regular menu module.
SET DIFFERENT HEADER PER PAGE
Ability to set different header design on per page basis.
Sometimes, you might want to have different header design for a specific page. In version 2.0, we added a new feature that allows you to set different header design on per page basis. You can also choose to revert back to original Divi header on specific page. This is particularly useful if you wish to have separate header design for your landing page.
VERTICAL NAVIGATION (NEW)
It’s now possible to have vertical navigation as your custom Divi header.
In the latest v3.0, we added support for Vertical Navigation + collapsible menu. We made 2 premade styles to get you started (Style 11 & 12). For the custom Vertical Navigation, when it’s below the breakpoint, it will switch into an overlay navigation that’s triggered by hamburger menu on click. Check out our demo style 11: https://header-demo.diviultimate.com/style-11/. We also added tons of new options for Vertical Navigation in Theme Customizer: custom width, custom breakpoint, option for no breakpoint, overlay navigation trigger styles, triggered background color, hamburger menu color & menu hover styles. For ‘no breakpoint’ example, check out our demo style 12: https://header-demo.diviultimate.com/style-12/
READY TO SPICE UP YOUR DIVI HEADER DESIGN?