How to Create a Sticky Menu in Divi

Divi has a built-in sticky header option that requires no plugin or code. The setting is in the Theme Customizer and takes less than a minute to enable. This guide also covers the more advanced options – the shrink effect, transparent fixed header on scroll, and per-page sticky overrides.

Step 1: Enable Sticky Navigation in the Customizer

Go to Appearance -> Customize -> Header & Navigation -> Header Format. Find “Fixed Navigation Bar” and set it to Yes. This makes the Divi header stick to the top as visitors scroll. Save and preview your site.

Step 2: Minimise on Scroll

Divi calls its shrink effect “Minimise Header”. In the same Header Format section, find Minimise Fixed Navigation Bar and set it to Yes. When enabled, the header becomes shorter as the visitor scrolls – the logo shrinks and padding reduces. Configure the starting height (full header) and minimised height in the adjacent fields.

Need help with your WordPress site? Describe your project and get a free estimate.

Step 3: Transparent Header for Hero Sections

The “Hide Navigation Until Scroll” option makes the navigation transparent and floating above your hero section, then solid when the visitor scrolls down. Go to Header Format -> Hide Navigation Until Scroll and enable it. This creates the popular effect where the header menu appears to float over a full-screen hero image and then becomes a solid bar as the visitor scrolls into the content.

Configure the text and logo color for the transparent state separately from the scrolled state. Since the transparent header overlays your hero image, ensure the menu link colors are readable against the hero background. White text works on dark hero images; dark text on light ones.

Step 4: Mobile Sticky Header

Divi’s sticky header applies to all devices by default. For mobile, the sticky navigation takes significant vertical space. You can disable the fixed navigation on mobile via custom CSS:

@media (max-width: 767px) {
  body.et_fixed_nav #main-header {
    position: relative !important;
  }
  body.et_fixed_nav #et-secondary-nav {
    position: relative !important;
  }
}

Add this to Divi -> Theme Options -> Custom CSS.

Step 5: Per-Page Sticky Override

For specific pages where you do not want a sticky header (a landing page with a custom hero that looks better without a floating menu), Divi allows per-page settings. Edit the page, open Divi Page Settings (the gear icon in the Divi Builder bar), and look for the Fixed Navigation option to override the global setting for that page only.

Adding a Back-to-Top Button Alongside the Sticky Header

A back-to-top button pairs well with a sticky header – similar patterns exist in Elementor‘s motion effects system. A back-to-top button pairs well with a sticky header – both help visitors navigate long pages. In Divi, add a Back To Top button in Theme Options -> Layout. Enable the button and configure its position (bottom right is standard) and style. The button appears when visitors have scrolled down enough to need it, complementing the sticky header that ensures navigation is always accessible at the top. Both features together significantly improve long-page navigation on mobile where scrolling through full-length pages is common.