If you’ve ever wished your WordPress header could do more, shrink on scroll, swap from transparent to solid, or show different menus for different users, this Divi tutorial is for you. You’ll build a polished custom header with the Divi Theme Builder, dial in responsive behavior, and set smart display conditions without touching PHP. We’ll move step-by-step so you can follow along and publish with confidence.
What You’ll Build And What You Need
You’ll create a custom header that’s clean, responsive, and flexible: a left-aligned logo, a primary menu, an optional call-to-action button, and supporting elements like search or a mini cart if you’re on WooCommerce. You’ll also add sticky behavior and a transparent-to-solid transition for hero pages.
Prerequisites And Setup
- WordPress site with Divi installed and activated (current version recommended).
- Divi Theme Builder enabled (in the backend under Divi > Theme Builder).
- Your logo file (SVG or high-res PNG), brand colors, and type choices ready.
- Optional: WooCommerce installed if you plan to add cart elements.
Recommended Design Prep
Decide which pages get a transparent header (often the homepage or landing pages with a hero image) versus a solid header. Jot down spacing rules: typical header heights are 80–120px on desktop and 60–80px on mobile. Identify your main CTA (e.g., Contact, Get a Quote) and choose a short label. If you have multiple audiences (customers vs. logged-in members), note what each should see in the navigation.
Create A Header Template In Theme Builder
Add A New Template And Assign Locations
Go to Divi > Theme Builder. Click Add New Template. In the assignment modal, pick where this header should display (e.g., Entire Site). Click Add Custom Header > Build Custom Header. Divi will open the visual builder with a blank canvas dedicated to your header.
Global Versus Page-Specific Headers
A global header assigned to “Entire Site” covers everything unless a page-, post-, or category-level header overrides it. For instance, you can have a global solid header site-wide and a separate transparent header template assigned only to the homepage. This is the best pattern for managing consistency without duplicating effort.
Exclude Rules And Priority Order
Theme Builder follows a priority order: the most specific template wins. You can also use Exclude rules to keep a header off certain content (e.g., exclude Product pages from your global header if WooCommerce needs a different layout). When in doubt, check the badges under each template in the Theme Builder screen, more specific assignments will override broader ones like Entire Site.
Design The Header Layout
Row Structure, Columns, And Spacing
Inside your custom header, start with a regular section. Add a single row with three columns: 25% (logo), 50% (menu), 25% (CTA/search/cart). This classic pattern balances content and gives room for long site names. In Row settings, set gutter width to 2 or 3 for tighter control, remove default top/bottom padding (you can add precise spacing in the section/row/column padding), and enable Equalize Column Heights if needed.
For the section background, choose transparent if you plan a transparent-to-solid effect. Otherwise, set your brand color or a subtle gradient. Add 20–30px of top/bottom padding at the section level to define the resting header height.
Logo And Site Identity Settings
Add an Image module to the left column. Upload an SVG if possible for crisp scaling: otherwise, a high-quality PNG. In Design > Sizing, set a max height around 40–60px on desktop and 30–40px on mobile. Link the logo to your homepage for accessibility and UX.
Primary Menu Module Essentials
Drop in a Menu module in the center column. Choose your Primary Menu from WordPress > Appearance > Menus. In Design > Layout, set the style to Left Aligned or Centered based on your brand. Adjust Menu Text size (15–17px desktop, 14–16px tablet, 13–15px phone), letter spacing (0–0.5px), and weight (500–600) for legibility. In Dropdown Menu, match colors to your palette and add a slight shadow for separation. If you have mega menus, enable “Make Menu Links Fullwidth” in the module and manage spacing in the Mega Menu settings.
Call To Action, Search, And Secondary Elements
In the right column, add a Button module for your CTA. Use a contrasting background color, medium radius (4–8px), and a hover style (slightly darker background and subtle scale 101%). Add a Search module if your site is content-heavy. For WooCommerce, consider a Cart or Mini Cart module: set an item count badge that’s visible at small sizes. Keep the right column uncluttered, two elements max is a good rule.
Add Effects And Responsive Behavior
Sticky Options And Shrink-On-Scroll
In Section settings > Advanced > Scroll Effects, enable Stick to Top. Do the same at the Row level if you need granular control. Then define “Sticky” styles: reduce section padding by about 30–40%, shrink the logo max height by 10–20px, and slightly decrease menu text size on sticky state. This creates a smooth shrink-on-scroll effect that conserves vertical space.
Transparent-To-Solid Header Transition
For pages with a hero image, keep the header section background transparent in the default state. In the Sticky state, switch to a solid brand color or a 95–98% opaque backdrop. If text becomes hard to read over hero imagery, add a subtle bottom border (1px, 10–15% opacity) or a light drop shadow on sticky to separate the header from content.
Show Or Hide Elements Per Device
Divi’s responsive toggles let you show the CTA button only on desktop/tablet and hide on phones, where space is tight. Conversely, show a search icon on mobile if that’s more useful. In each module’s Advanced > Visibility, toggle display for desktop, tablet, and phone. Keep parity in navigation options, don’t hide essential links entirely on any device.
Mobile Menu Styling And Breakpoints
In the Menu module, style the hamburger icon, mobile background, and dropdown link spacing. Aim for a 16–18px mobile link size with at least 12–16px vertical padding for tappability. If your menu wraps too early or too late, adjust the Breakpoint via Theme Options > General > Phone Menu (or use custom CSS if needed) so the mobile menu triggers at a width that matches your layout.
Dynamic Content, Conditions, And Reuse
Display Conditions And Role-Based Variations
Divi Theme Builder’s display assignments double as conditions. To show different headers to logged-in users, create a second header template and assign it to “All Logged In Users” while excluding “Logged Out Users,” or vice versa. For membership sites, show a “Dashboard” link when users are logged in and a “Sign In” CTA when they aren’t. If you’re targeting regions, pair Divi with a geolocation or multilingual plugin and assign headers per language or category.
Dynamic Data And WooCommerce Integration
Use dynamic fields to pull the Site Title, Tagline, or a phone number stored in Theme Options. For WooCommerce stores, include the Mini Cart module (or icon) and style the count badge. If you run promos, add a slim Top Bar section above the main header with a text module pulling a dynamic ACF field, so you can update the promo site-wide without editing the layout.
Save, Export, And Reuse Across Sites
When your header is dialed in, save the layout to the Divi Library. In Theme Builder, click the portability icon to export the full template (with assignments). You can import it on another site and update branding tokens, colors, logo, button styles, in minutes. This is the fastest way to standardize headers across client sites without rebuilding from scratch.
Test, Troubleshoot, And Publish
Cross-Browser And Device Testing
Preview your custom header in Chrome, Safari, Firefox, and on actual devices if possible. Resize the browser and test tablet and phone breakpoints. Check sticky behavior, dropdown alignment, and that the transparent-to-solid transition feels smooth and legible over varied backgrounds.
Common Conflicts And Quick Fixes
- Caching/CDN not showing updates: clear Divi static CSS file cache (Divi > Theme Options > Builder > Advanced), purge plugin cache, and hard refresh.
- Z-index issues (menu behind content): increase the section’s z-index (e.g., 9999) under Advanced > Position.
- Double headers: make sure only one template is assigned to the same location without conflicts: remove default header in Theme Builder by creating a global header.
- Sticky jitter: avoid applying sticky to both section and inner row unless necessary: pick one level to control.
- Dropdown off-screen: adjust dropdown direction or add right padding: reduce mega menu column count on smaller screens.
Performance, Accessibility, And Final Checks
Compress the logo and icons, enable static CSS file generation, and defer heavy scripts where possible. Ensure color contrast meets WCAG guidelines (4.5:1 for body text: 3:1 for large text). Add focus styles to menu links and ensure the hamburger toggles via keyboard (Tab/Enter). Set meaningful aria-labels for the mobile menu toggle and the site logo link. Finally, check that your header doesn’t push CLS, lock in heights with consistent padding and defined logo max heights.
Conclusion
A polished header sets the tone for your entire site. With the Divi Theme Builder, you can craft a custom header that’s on-brand, responsive, and smart, complete with sticky behavior, a transparent-to-solid switch, and role-aware menus. Keep your structure simple, your typography readable, and your conditions clear. Once you’ve saved the template, reuse it across projects to speed up builds. And if you’re feeling ambitious, stack on a promo bar or a seasonal variant with just a few clicks. That’s the beauty of a flexible Divi header done right.
No responses yet