I recently did this on a friend’s site and figured this might be something others would like to use to change up their mobile menu. It’s not a whole lot of CSS and makes the mobile menu easier to access. And not so Divi-looking lol.

If you use Divi’s default header format (logo on left, menu on right) or centered inline logo format (logo smackdab in the middle) then my CSS code will let you use your logo (or whatever image you prefer) as a fixed mobile menu button.

UPDATE: Centered Inline Logo format code added courtesy of a request from Nick in the comments 🙂

In my opinion fixed menus are better for UX. Would you rather scroll to find what you need or not scroll? No-brainer. The code also makes the menu fullwidth because I just think that looks better.

You can also use a background image instead of a solid background color (check the code comments) but be careful to not negatively affect readability.

/****************************************************************/
/*** LOGO AS FIXED MOBILE MENU BUTTON - DEFAULT HEADER FORMAT ***/
/****************************************************************/
 .et_mobile_menu {
     border: 0; /* removes top colored border - optional */
     top: 0;
     z-index: -1;
     /* if you want a background image this is where you would put it */
}
 .et_mobile_menu li a {
     font-size: 18px; /* if  you want to make the font bigger - optional */
     border-bottom: 0; /* removes Divi's borders between menu links - optional */
}
 .et_mobile_menu li a:hover {
	 opacity: 1; /* removes opacity change on click - optional */
	 background-color: transparent; /* removes Divi's colored background on click - optional */
}
 .mobile_menu_bar {
     content: "";
     width: 50px;
     height: 50px;
     background: url("https://placehold.it/100x100"); /* your logo image URL, double the size for crispness */
     background-size: cover;
     border-radius: 50px; /* makes image round - optional */
     margin-top: 6px; /* distance from top edge */
     margin-right: 6px; /* distance from right edge */
     padding-bottom: 0;
}
 .mobile_menu_bar:before {
     content: "";
}
 @media only screen and (max-width: 980px) {
     #main-content {
         margin-top: -60px; 
         /* this raises the content to compensate for missing menu BUT CHECK YOUR SITE! You may prefer to change your section settings instead */
	 }
     #main-header .container {
         width: 100%;
    }
     #et-top-navigation {
         padding-top: 0 !important;
         position: fixed;
         top: 0;
         width: 100%;
    }
}

/**********************************************************************/
/*** LOGO AS FIXED MOBILE MENU BUTTON - CENTERED INLINE LOGO FORMAT ***/
/**********************************************************************/
 .et_mobile_menu {
     border: 0; /* removes top colored border - optional */
     z-index: -1;
	 /* if you want a background image this is where you would put it */
}
 .et_mobile_menu li a {
     font-size: 18px; /* if you want to make the font bigger - optional */
     border-bottom: 0; /* removes Divi's borders between menu links - optional */
}
 .et_mobile_menu li a:hover {
     opacity: 1; /* removes opacity change on click - optional */
     background-color: transparent; /* removes link colored background - optional */
}
 .mobile_menu_bar {
     content: "";
     width: 50px;
     height: 50px;
     background: url("https://placehold.it/100x100"); /* your logo image URL, double the size for crispness */
     background-size: cover;
     border-radius: 50px; /* makes image round - optional */
     margin-right: 6px; /* distance from right edge */
     margin-top: 6px; /* distance from top edge */
}
 .mobile_menu_bar:before {
     content: "";
}
 .et_header_style_split .et_mobile_menu {
     top: 0;
}
 .et_header_style_split #et_mobile_nav_menu {
     margin-top: 0;
}
 .et_header_style_split #main-header .mobile_nav {
     height: 0;
     padding: 0;
}
 .et_header_style_split .mobile_nav .select_page {
     font-size: 0;
}
 @media only screen and (max-width: 980px) {
     .et_header_style_split #main-header {
         position: fixed;
         top: 0 !important;
         padding: 0;
         height: 0;
    }
     #main-header .container {
         width: 100%;
    }
     #main-content {
         margin-top: -60px; 
         /* this raises the content to compensate for missing menu BUT check your site! You may prefer to change your section settings instead */
    }
}

Notes:

• This only works with the default header and the centered inline logo settings. If you use a different setting and would like to use this leave a comment along with a link to your site and I’ll get you some code as soon as I can.