Use Logo as Fixed Divi Mobile Menu Button (Default Header Format Only)

Sep 5, 2019 | CSS Tutorial | 0 comments

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) then my CSS code will let you use your logo (or whatever image you prefer) as a fixed mobile menu button.

Use Logo as Fixed Mobile Menu (Default Menu Setting) | A Girl and Her Mac

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

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 ***/
/****************************************/
 .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%;
    }
}

 

Notes:

  • This only works with the default header setting. 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.