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