The Divi theme is a popular WordPress theme that includes a mobile menu feature. By default, the mobile menu in Divi is displayed as a hamburger icon that expands into a full-screen menu when clicked. However, you may want to customize the appearance or behavior of the mobile menu to better suit your needs.
To customize the Divi mobile menu, you can use a combination of CSS and JavaScript. Here’s an example code snippet that demonstrates how to change the background color of the mobile menu:
/* CSS */
@media only screen and (max-width: 980px) {
/* Change the background color of the mobile menu */
.et_mobile_menu {
background-color: #ff0000;
}
}
In the above code snippet, we use a media query to target screens with a maximum width of 980 pixels, which corresponds to mobile devices. Within the media query, we select the .et_mobile_menu class and set the background-color property to #ff0000, which is a red color. You can replace this value with any valid CSS color code to achieve the desired background color.
To apply this customization to your Divi theme, you can add the CSS code to your theme’s stylesheet. If your theme has a custom CSS option, you can add it there. Otherwise, you can use a plugin like “Simple Custom CSS and JS” to add the code.
Keep in mind that this code snippet only changes the background color of the mobile menu. If you want to customize other aspects of the mobile menu, such as the font color, menu items, or animation, you’ll need to modify the CSS accordingly.
Remember to always test your changes on different mobile devices to ensure a consistent and visually appealing mobile menu experience for your users.
Examples
Example 1: Change the mobile menu icon in Divi
This example demonstrates how to change the default mobile menu icon in Divi to a custom icon using CSS.
/* Add custom mobile menu icon */
#et_mobile_nav_menu .mobile_menu_bar:before {
content: "f039";
font-family: "FontAwesome";
}
In this code example, we use CSS to target the mobile menu icon element in Divi (#et_mobile_nav_menu .mobile_menu_bar:before) and change its content to a custom icon. We use the content property to specify the Unicode character of the desired icon and the font-family property to set the font family to “FontAwesome” to ensure the icon is displayed correctly.
Example 2: Add a logo to the Divi mobile menu
This example demonstrates how to add a logo to the Divi mobile menu by modifying the mobile menu template file.
function wpsnippets_add_logo_to_mobile_menu() {
if (has_custom_logo()) {
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
$logo_url = $logo[0];
echo '<div class="mobile_menu_logo"><a href="' . esc_url(home_url('/')) . '"><img src="' . esc_url($logo_url) . '" alt="' . get_bloginfo('name') . '"></a></div>';
}
}
add_action('et_mobile_menu_after', 'wpsnippets_add_logo_to_mobile_menu');
In this code example, we create a custom function wpsnippets_add_logo_to_mobile_menu() that checks if a custom logo is set using the has_custom_logo() function. If a custom logo is set, we retrieve the logo image URL using wp_get_attachment_image_src() and output it along with a link to the homepage inside a <div> element with the class mobile_menu_logo. We then hook this function to the et_mobile_menu_after action hook to display the logo after the mobile menu.
Example 3: Customize the styling of the Divi mobile menu
This example demonstrates how to customize the styling of the Divi mobile menu by adding custom CSS.
/* Customize mobile menu styling */
#et_mobile_nav_menu {
background-color: #000;
padding: 20px;
}
#et_mobile_nav_menu .menu-item {
margin-bottom: 10px;
}
#et_mobile_nav_menu .menu-item a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
In this code example, we use CSS to target specific elements within the Divi mobile menu and apply custom styling. We set the background color and padding of the mobile menu container (#et_mobile_nav_menu), adjust the margin between menu items (.menu-item), and change the color, font weight, and text transformation of the menu item links (.menu-item a). These CSS rules can be modified to achieve the desired styling for the Divi mobile menu.