Skip to main content

Fullscreen Menu Style

Video Guide

Divi Mobile brings the convenience and style of mobile navigation to your desktop experience. Utilizing fullscreen menu styles like FullScreen Slide Down or FullScreen Fade, your website can offer a dynamic, modern navigation solution on larger screens.

Activating Divi Mobile Menu on Desktop

note

The feature we are discussing in this doc relies on cursor hover. It requires the presence of a mouse or similar pointing device, which is typical in a desktop environment.

To use the Divi Mobile menu on the desktop, follow these steps:

  1. Access the Theme Customizer in your WordPress dashboard.
  2. Navigate to Divi Mobile > General Settings.
  3. Locate the DIVI MOBILE BREAK POINT setting.
  4. Set the breakpoint pixel value to a high enough number so the mobile menu to trigger on desktop screens.

DIVI MOBILE BREAK POINT Setting

Selecting the FullScreen Menu Style

Within the Expand From Outside Screen Style, select either FullScreen Slide Down or FullScreen Fade. Detailed guidance on selecting these styles is available in the linked documentation:

info

Remember, FullScreen Slide Down or FullScreen Fade styles are necessary for the feature below to function correctly.

Enabling the EXTRA FullScreen Menu Appearance

For a singular extra option for the FullScreen menu style:

  1. Still in the Theme Customizer, proceed to Divi Mobile > FullScreen Menu Style.
  2. In the EXTRA APPEARANCE OPTIONS field, select Menu name behind item on hover.

FullScreen Menu EXTRA APPEARANCE OPTIONS

Here is a preview of the settings:

Preview

Customize the Appearance Further

Below the previous settings, you can customize the font:

Font customization