Divi by Elegant Themes stands out very much in its degree of personalization of every detail, either natively in the theme itself or supported by plugins that allow even more elements to be adjusted.

For the mobile versions of our web pages, we have several customization options and here we’ll teach you everything you need to know.

Customize the menu with the Divi Mobile Customizer plugin

This plugin will give your website a separate menu style for its mobile version.

Once installed, it will be added to your Divi customizer, you will see it in the “Mobile menu customizer” option. From this option you can:

• Know how the menu will look in the mobile browser, smartphone, and tablet version. This includes adjusting font sizes and spacing for each type of mobile device.
• Customize the menu header: background color, text and icon; Texts that will be displayed when opening and closing the menu, text size, size of the icons, the font of the menu bar and sliding style of the menu.
• Customize the menu: set the menu, adjust it to full screen, set the fill color of the menu and the top bar, set the text alignment, borders and opacity of the menu.
• Customize each menu item separately. Adjust the margins, height, width, background color, edge radius, and border color.
• Customize the submenus: adjust the background color, links, typography, style and make the menu fold.
  Add shadows and set the direction, blur and color.
• Apply gradients to the menu and header. Change the angle in each one.
• Apply opening and closing animations of the menu, and combine them.
• Set a background image in the drop-down menu in terms of size, position, how it fits on the edge.

To make matters worse, the plugin can be installed on all websites you want and includes updates for life and 6 months of support.

Customize the menu using CSS and jQuery

If instead, you do not want to install the plugin, we bring you several ways to customize the menu using CSS and jQuery in one of the cases. The CSS codes that we will show you must be added in the “Additional CSS” option in the “Theme Customizer”.

Fix the header using CSS

The option to fix the header is already added in Divi, in the class called “et-fixed-header”, so we can use that selector to add a custom CSS and modify the style of our fixed header.

In the code that we will show you next, it makes the header remain fixed at the top, adds a semi-transparent white color to the header, the navigation icon measures 45px and the height of the header is 55 px. At Apple’s suggestion, the clickable elements of the web pages must be at least 44×44 pixels, so that the user’s experience when pressing them is efficient.

@media (max-width: 980px) {
  /* 
   * 
   * Style mobile fixed header */

  .et_fixed_nav #main-header.et-fixed-header {
    position: fixed;
    background: rgba (255,255,255.0.8);
    height: 55px;
  }
  .et-fixed-header .logo_container {
    height: 55px;
  }
  .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }

  /* 
   * 
   * Make mobile fixed header navigation icon larger */

  .et-fixed-header .mobile_menu_bar:before {
    font-size: 45px;
  }
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  .et_fixed_nav #et-top-navigation {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
  }

  /* 
   * 
   *  Increase height of logo area on mobile and mobile fixed header */

  #logo, 
  .et-fixed-header #logo {
    max-height: 80%;
  }
}

Customize the logo in the fixed header

You may want to use a different logo in the fixed header of the mobile version, so you will need the URLs of the logo that you are already using in the desktop version and the URL of the logo you are going to use. You must upload the logos to your library and extract those URLs.

Once you have the URLs, you must access “Integrations” (Divi> Theme> Options> Integrations). There you must access “Add the code in the blog header” and add the following jQuery code. Once you have added it, in the line “ENTER DESKTOP LOGO IMAGE URL”, copy the URL of the logo you use in the desktop version. In the line “ENTER MOBILE LOGO IMAGE URL”, copy the URL of the logo that you will use in the mobile version.

Of course, save the changes!

var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function () {
  var $header = jQuery('header');
  var $logo = jQuery('#logo');
  if ((jQuery(window).width() < 981) && ($header.hasClass('et-fixed-header'))) {
    return $logo.attr('src', imageUrl[1]);
  }
  ;
  return $logo.attr('src', imageUrl[0])
});

Remove elements in the header

With this code, only the hamburger menu will be visible, so that the design of your mobile website is as minimal as possible.

/* switch off the Search button on Default header */

div.et_menu_container span #et_search_icon { 
  display: none; 
} 

/* make the enclosing container transparent on Centered and Centered Inline Logo headers */

div.et_menu_container div.mobile_nav { 
  background-color: transparent! important; 
} 

/* switch off the Select Page text on Centered and Centered Inline Logo headers */

div.et_menu_container span.select_page { 
  display: none! important; 
} 

/* switch off the mobile logo on Default and Centered Headers */

div.et_menu_container div.logo_container { 
  display: none; 
}

Customize the drop-down menu

Change the color

With this code, you can change the color of the menu drop-down button, replace the “000000” with the color code you require.

/* Customize the color of the drop-down button in the top menu */
span.mobile_menu_bar.mobile_menu_bar_toggle::before {
  color: #000000;
}

Change the 3 parallel strips to an X when the menu is displayed

So that the 3 dashes of the menu are not visible when it is displayed and an X appears instead, add this code:

.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d"; 
  color: #fff;
}

Remove the menu border when it is open

If you want to display the menu without borders (the entire menu and the items, add this code:

.et_mobile_menu {
border-top: 0px;
}

Eliminate hover in the submenus

If you are working on a child theme add the following CSS rule to your child stylesheet:

.et_mobile_menu li a:hover {
opacity: 1;
background-color: #fff;
}

How was your menu? Have you used the plugin? Tell us what you think!