Divi

How to have a sticky or a fixed header on mobile?

By July 29, 2020 No Comments

The following code helped me with getting a sticky header on the mobile device.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*******************
 * FIXED HEADER ON MOBILE
 *
 * SOURCE: https://divilife.com/create-fixed-mobile-menu-divi/
 *
 * */



@media (max-width: 980px) {
    .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
        position: fixed;
    }
   
    .et_mobile_menu {
        overflow: scroll !important;
        max-height: 83vh;
    }
   
}

Source: https://divilife.com/create-fixed-mobile-menu-divi