Divi Mobile: Burger Menu Settings Guide
The Burger Menu is a crucial element of modern mobile navigation, providing users with a clear and accessible way to browse your site. Divi Mobile enhances this functionality with extensive customization options. This guide will help you navigate through the Burger Menu Settings, allowing you to tailor the menu to fit your site's aesthetic and functional needs.
Video
Live Preview Loading
- 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.
- 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.
- 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.
Implementing Burger Menu Settings
- In your WordPress dashboard, find and select Divi Mobile inside the Theme Customizer.
- Look for the Burger Menu Settings section where you can configure the Burger Menu Settings.
- After making your selections, be sure to save your changes to apply them to your site.
Key Burger Menu Settings
Burger Menu Style
Choose the number of lines for your burger menu icon. This style variation allows you to match the icon with your site's design theme.
Burger Menu Position on Screen
Position your burger menu on the left or right side of the header, depending on your design preferences and the layout of your mobile site.
Burger Menu Animation
Select an animation for the burger menu lines. The animation activates when the menu is interacted with, adding a dynamic visual element to your site.
Burger Menu Distance
Adjust the position of the burger menu within the header. This setting helps in fine-tuning the menu's placement for optimal accessibility and visual balance.
Burger Menu Closed Color
Set the color of the burger menu when it is closed. This color should complement your site's color scheme while making the menu easily identifiable
Burger Menu Open Color
Choose a color for the burger menu when it is open. A contrasting color can effectively indicate the menu's active state to users.
Burger Menu Icon (Lines) Position
Determine the exact position of the lines within the burger menu. This adjustment ensures the icon aligns well with other elements in your mobile header.
Burger Menu Text
Add specific text next to the burger menu. This text can serve as a call-to-action or simply inform users that this is the menu, enhancing usability.
Burger Menu Background Color
Specify the background color of the burger menu. Selecting an appropriate background color enhances the menu's visibility and integration with your site's overall design.
Tips for Success
- Consistency: Maintain a consistent look and feel with your site's branding to foster a cohesive user experience.
- Test for Usability: Regularly test the burger menu on various devices to ensure the settings provide an optimal navigation experience.
- Consider User Accessibility: Make the menu easy to find and interact with, considering factors like color contrast and menu text legibility.
By customizing the Burger Menu settings in Divi Mobile, you can significantly enhance the mobile navigation experience on your site, making it more engaging, accessible, and in line with your brand identity.
Menu Preservation Across Theme Changes
- Divi Mobile associates the mobile menu you design directly with your currently active theme
- Switching your website's theme to a different parent or child theme necessitates the reconfiguration of your mobile menu. This is essential to note, as a theme change can disrupt the appearance and functionality of your previously designed mobile menu.
- Before altering your site's theme, plan for the recreation of your mobile menu under the new theme. This ensures a seamless transition and maintains the navigational experience for your mobile users.