Creating a Simple Custom Header and Menu with Divi Mobile

Divi Mobile is a powerful plugin for creating a responsive and visually appealing mobile menu and custom header on your Divi-powered WordPress site. This guide will walk you through the process of configuring a simple yet effective mobile navigation experience.

info

Live Preview Loading

1. While working within WordPress, you might encounter delays in the live preview mode's responsiveness. This is a common occurrence due to the foundational structure of WordPress.
2. Should the live preview not reflect your changes immediately, proceed to publish your modifications and then refresh the page. Repeating this process can help in accurately displaying your updates.
3. To verify the appearance and functionality of your mobile menu accurately, consider viewing your site from a separate device where you're not logged into the WordPress admin area, such as on a mobile phone. This approach offers a more authentic user perspective.

Step 1: Access Customize Settings

1. Navigate to your WordPress admin dashboard.
2. Go to Appearance > Customize to open the Theme Customizer.

Adjust General Settings

1. Premade Menu Styles: Click on General Settings. Select Style 1 from the premade menu styles. This style provides a basic, user-friendly navigation layout. Click Publish to save changes.

2. Mobile Header Style: Ensure that the Mobile Header Style is set to Divi Mobile. This option allows you to utilize Divi Mobile's custom header builder. Click Publish.

3. Primary Menu Selection: Scroll to the Primary Menu section and select the menu you wish to display as your primary mobile menu. Click Publish.

4. Menu Movement: Choose Expand from outside screen for the Select Primary Menu Movement feature. This setting determines how the menu appears on the screen. Click Publish.

Customize the Custom Header

1. Enable Custom Header: Return to the previous menu and select Custom Header. Toggle the Yes button to create a custom header. Click Publish.

2. Upload Custom Header Logo: Choose and upload a custom header logo from your media gallery. This logo will represent your brand on all mobile pages. Click Publish.

Style the Burger Menu

1. Burger Menu Background Color: Go back to the previous menu and select Burger Menu. Under the burger menu background section, select a color that complements your brand or site design. Click Publish.

Define Menu Style

1. Menu Background Color: Navigate to the Menu Style section. Set your preferred menu background color to enhance visual appeal. Click Publish.

2. Menu Text Settings: Adjust the menu text color, hover color, and active menu text color to ensure readability and visual consistency. Click Publish.

3. Text Size and Alignment: Further down, set the menu text size and alignment according to your design preferences. These adjustments contribute to the menu's usability and appearance. Click Publish.

Mobile Menu Example

Finalizing Your Custom Mobile Menu

After completing these steps, you'll have a basic yet fully functional custom mobile menu and header, tailored to your site's needs and style preferences. Remember, the Divi Mobile plugin offers extensive customization options, so feel free to explore beyond these basic settings to further enhance your mobile site's navigation.

Tips for Success

1. Consistency: Ensure your mobile header and menu design align with your site's overall style for a cohesive user experience.
2. Testing: Preview your site on various mobile devices to verify that the menu functions and appears as expected across different screen sizes.
3. Updates: Keep Divi Mobile updated to take advantage of the latest features and improvements.

info

More Information

For detailed information on additional settings within Divi Mobile, please refer to the comprehensive documentation available.