Last Updated on October 2, 2019
Logo as Fixed Divi Mobile Menu Button (Default Header + Centered Inline Formats)
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.
Instructions
- In the customizer > mobile styles > mobile menu
- check the hide logo image box
- set text color
- set background color
- Add my CSS and tweak to suit your needs

css code – default header format
The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.
/****************************************************************/ /*** 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%; } }
css code – centered inline logo format
The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.
/**********************************************************************/ /*** 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.
Love this, I do use the “Center Inline Logo” header and the mobile version is soooooo awful… Seriously, if there would have been mobile menus in the 90’s this would have been it!
That would be awesome if you had time to share the way to achieve this with the “Center Inline Logo” header. If you do not have time, that’s cool, I know you’re busy-busy.
My site is nicksocha.dev
Take care,
Nick
Hi Nick , thanks for the request and for your patience! I’ve added code for the centered inline logo option and tested it on a demo site. Let me know if you have issues 🙂
Thanks Leslie, modified a few of the sizes to sculpt it to my site and it works like a million bucks. Very cool, thanks again!
This is awesome! I love the clean look it gave to the mobile menu. Thank you!!!
So glad it helped Adney!! Thanks so much for checking out my site 🙂