# Full-Screen Mobile Menu in Divi

> Turns the small dropdown mobile menu of Divi's default header into a full-screen menu with large, easy-to-tap links.

- Type: CSS
- Runs: Site-wide header
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: divi, mobile-menu, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/divi-fullscreen-mobile-menu/

## Code

```css
@media (max-width: 980px) {
    #main-header .et_mobile_menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
        overflow-y: auto;
        padding: 24px 6%;
        border-top: 0;
        background: #111827 !important;
    }

    #main-header .et_mobile_menu li a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff !important;
        font-size: 20px;
    }
}
```

## Notes

Change the background and text colors to match your brand.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Full-Screen Mobile Menu in Divi" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/