Skip to main content

Floating DiviMenus

Display any DiviMenu from your library as a floating menu over the content, on the pages and positions you choose.

Updated this week

Floating DiviMenus lets you display any DiviMenu from your Divi Library floating above the content on selected pages, posts, and other destinations.

Installation

  1. Install and activate the Divi Theme.

  2. Ensure that the DiviMenus plugin is also installed and activated.

  3. Go to WordPress Dashboard → Plugins.

  4. Click on the Add New Plugin button.

  5. Click on the Upload Plugin button.

  6. Choose the Floating DiviMenus zip file.

  7. Click on the Install Now button.

Overview

Floating DiviMenus include:

  • Per-page control via meta boxes.

  • Full control over location (e.g., top-left, bottom-right).

  • Responsive support so that you can set different menus per device.

  • An option to hide the menu after scrolling a set distance.

Plugin Settings Page

​​

You can configure your floating menus from the Floating DiviMenus settings page by going to WordPress Dashboard → DonDivi → Floating DiviMenu.

The plugin's settings are divided into three sections:

  • Divi Menu

  • Use on

  • Location

DiviMenu section

Choose the DiviMenu to display. The dropdown shows all DiviMenus saved in your Divi Library. You can assign:

  • One DiviMenu for all devices.

  • Or different DiviMenus for desktop, tablet, and phone.​

Use On section

Select where the floating DiviMenu will appear. Supported post types and destinations include:

  • Pages

  • Posts

  • Divi Projects

  • WooCommerce Products

  • Search Results

  • 404 Page

  • Categories

  • Tags

  • Archives

You can display the DiviMenu on:

  • Specific pages or posts.

  • Entire categories.

  • Project categories.

  • Product archives.

  • Search results or error pages.

Location Section

Choose where on the screen the DiviMenu should appear.

Examples:

  • Top Left

  • Top Right

  • Bottom Center

  • Right Center

  • And more

Notes:

  • You do not need to align the DiviMenu inside its settings. The plugin handles positioning automatically.

  • If you want space between the DiviMenu and the screen edge, you can add top, left, right, and bottom spacing inside the original DiviMenu module (e.g., using padding or margin).

Alternatively, use these CSS classes:

  • .dd-floating-divimenu

  • .dd-floating-divimenu-tablet

  • .dd-floating-divimenu-phone

Hide On Page Scroll (Optional)

Enable this option if you want to hide the floating DiviMenu after the user scrolls a set amount.

  • Set the scroll offset in pixels (e.g., 200).

  • Enter a different offset for desktop, tablet, and phone if needed.

  • Leave the field empty for a device to turn off hiding on scroll.

You can override this scroll behavior per post or page using the Floating DiviMenus meta box.

Meta Boxes

When editing any page, post, project, or product, a meta box called Floating DiviMenus appears.

You can use it to:

  • Override the global settings.​

  • Show/hide the DiviMenu only on this page.

  • Use a different DiviMenu for this post.

  • Adjust scroll offset.

  • Deactivate it on certain devices.

This is useful when you need exceptions on individual pages without affecting global settings.

Troubleshooting

  • Changes Are Not Reflected on the Front-End

    • Problem: You updated a DiviMenu in Visual Builder, but the changes don't appear on the front end.

    • Cause: Divi's static CSS cache may still be serving the old styles.

    • Solution: Go to Divi → Theme Options → Builder → Advanced and click Clear under the Static CSS File Generation section.

      Also, clear your site and browser cache if applicable.

  • DiviMenu Only Appears on Single Posts/Pages

    • Problem: The DiviMenu shows on single posts/pages, but not on archives or category pages.

    • Cause: You may be using a theme other than Divi. Non-Divi themes may use templates that don't render Divi Library layouts correctly in archives.

    • Solution: Use the Divi Theme or ensure your theme supports injecting layouts in archive templates.

Did this answer your question?